Canvasに画像を貼り付けるTweetHTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。いうわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。今回は「ゆるドラシル」のアセットを利用させていただきました。何も考えずにJPEGやPNG、WebPなどブラウザが解釈できる画像をCanvasに貼り付けるだけらな、ctx.drawImage()メソッドを実行するだけです。dy画像を貼り付けるcanvasの位置を指定。canvasの左上を0とした座標です。サンプルコード必要な箇所の抜粋です。ここでのポイントは画像がブラウザに読み込まれた後にctx.drawImage()を実行する必要があります。//getElementById()等でも可。オブジェクトが取れれば良い。元画像はこれなんですが、画像サイズが460×680あるのに対して、Canvasの大きさが460×460と高さがオーバーしてしまいます。この場合はエラーになるわけではなく単にはみ出した部分がカットされます。元画像を縮小・拡大してから貼り付けるctx.drawImage()は引数の数で挙動が変わります。縦と横のサイズを追加で指定すると、自動で縮小/拡大してくれます。dHeightCanvas上での画像サイズを指定。dWidthが横幅、dHeightが高さ。アスペクト比(縦横比)が狂った指定になった場合、狂った状態で貼り付けられます。サンプルコードctx.drawImage()に第3・第4引数を追加しただけです。元の画像を縮小して貼り付けたので、今度はCanvasの中に収まりましたね。元画像の一部分を切り抜いて貼り付けるCanvasでスプライトアニメなどを実装するときに利用できますね。sy元画像を切り出すにあたり、始点となる左上の座標を指定します。sxがX座標,syがYz座標。sHeight元画像を切り出すにあたり、始点(sx,sy)からの横幅と高さを指定します。sWidthが横幅、sHeightが高さ。dHeightで指定します。切り抜く前ではなく切り抜いた後の画像サイズである点に注意が必要です。サンプルコードctx.drawImage()の引数をガラッと刷新しました。};};</script>座標の位置を特定するには、適当な画像編集ソフト(Photoshop)とかで開きルーラーを参考にするなどしてください。顔の部分だけを切り抜いて、Canvasいっぱいに拡大しました。自宅警備がてらゲームのお仕事や講師などしてご飯を食べてます。ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。コメントデータの処理方法の詳細はこちらをご覧ください。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。