タグ：Canvas：記事一覧

Canvasの画像をPNGやJPEGファイルとしてＰＣやスマホに保存する方法をお伝えします。

Canvas画像をBMPに変換したかったのだけど、Chromeが対応していなかった。仕方がないので、自力でBMPファイルを生成してみます。

あまり需要がなさそうですが、Canvas画像をPNGまたはJPEGに変換して、その結果をバッファに格納する方法をお伝えします。

CanvasのtoDataURL()は、一部のブラウザでBMP形式をサポートしています。そこで、ブラウザが特定の形式をサポートしているかどうかをJavaScriptコードで確認してみます。

ブラウザのCanvas要素に描画した画像を、BMP形式でダウンロードしてみます。CanvasのtoDataURL()は、画像データをPNGやJPEG形式に変換して、データＵＲＬを生成してくれます。FirefoxはtoDataURL()の引数にimage/bmpを指定すると、BMP形式に変換してくれます。

JavaScriptのCanvasAPIにはtranslateやscaleなどの変換メソッドがあります。しかし変換をリセットするメソッドが存在しません。そこで、変換内容をリセットする方法をお伝えします。

JavaScriptのCanvasAPIを使用すると、ブラウザに図形を描画できます。しかし左下を原点としてグラフを描画しようとすると、少し手間取ることがあります。どうすればいいのでしょうか。

『リバーシを作る』の第三回目は、思考ルーチンを組み込み、コンピューターと対戦できるようにしてみます。

最弱『リバーシを作る』の第二回目は、ゲーム状況を管理する機能を作成し、ある程度遊べるものに仕上げてみます。

僕が若いころ作成して史上最弱と友達に言われたリバーシをJavaScriptで作成してみます。悲しい思い出にリベンジするべく、今回は強いものにも挑戦します。

Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。

JavaScriptのCanvasAPIを利用すると、canvas要素に描画をおこなうことができます。CanvasAPIの使い方と、利用できるメソッドについてまとめてみました。

JavaScriptでCanvasに描画していたら、SecurityErrorが出ました。原因を調べてみました。

JavaScriptでサーバー上にある画像を読み込んで、Canvas要素上に貼り付ける方法をお伝えします。

JavaScriptのCanvasAPIで描画をするとき、頻繁に使用するパスはPath2Dを使用すると何度でも使いまわすことができます。アニメーションなどを表現するなら、とても便利な機能です。そこで今回は、Path2Dについてお伝えします。

JavaScriptのCanvasAPI にisPointInPath()というメソッドがあります。パス内に指定した座標が含まれているかどうか確認するメソッドですが、どんなケースで使用するのか不明でした。そこで自分なりに使用目的を考えてみたところ、ブラウザ用で図形の内側がクリックされたかどうかの確認できると思いいたりました。そこでデモとして、クリックした図形を塗りつぶすJavaScriptコードを作成しました。