ystream

PixelArtsという個人的なプロジェクトでcanvasをガンガン使っているんですが、canvasとその周辺技術についてTipsをまとめたいと思います。canvasにはclip()という、画像処理でいうマスクのような機能が存在します。しかし、このclip()を同じcanvasで連続して使うには、少しばかりのコツが必要でした。

PixelArtsという個人的なプロジェクトでcanvasをガンガン使っているんですが、canvasとその周辺技術についてTipsをまとめたいと思います。canvasを使って、複雑な描画をしようとすると、canvasが1枚では足りない状況に陥ります。その場合はゲームなどでよく使われるように別に一時描画用のcanvasを用意して予め画面を作って一気にコピーすると色々捗ります。その際に利用するメソッドは、drawImage()か、はたまたputImageData()なのか。どっちでも良いわけじゃなかった、2つの違いを比べてみました。

PixelArtsという個人的なプロジェクトでcanvasをガンガン使っているんですが、canvasとその周辺技術についてTipsをまとめたいと思います。まず最初のTipsはループ処理。ゲームなどでキー入力待ちを行う場合などは、ループ処理で入力を待つなんて事をしますが、JavaScriptでループを回しっぱなしにするとフリーズします。フリーズせずにループをする方法に加えて、擬似的にフレームレートを設定する方法をまとめます。

以前にもローカルストレージを使って実装した事もありましたが、クッキーでは収まらないサイズのデータを扱うオフラインウェブアプリを作った際に色々調べたことをまとめてみます。

HTMLで画像をいじくりたい時は、canvasを利用して編集するのは一般的ですが、WindowsストアアプリではHTML+CSS+JSでのアプリ開発ができる事もあって、簡単な画像編集であれば、C#やVBを使うより分かりやすいし資料が多く、C++でDirectXをガリガリ書くよりお手軽。入出力もファイルピッカーを使えば簡単に実装できます。今回は、Windowsのコードではなく、Canvasを利用する時のJavaScriptを使いどきに合わせてまとめていきます。

bloggerの機能として付いているソーシャルボタンは gmailに送るとかg+に送るとかあまり使えたもんじゃないので、ガッと簡単に追加できれば嬉しいな、ということで探した結果、楽ちんに追加できるJavaScriptを発見したので紹介します。