HTML一覧

NO IMAGE

canvas.drawImagで貼り付ける画像を回転させる

さて今度は回転の話です。これはdrawImageの引数では指定できませんので、変形マトリックスを使います。これもまた2通りのやり方があります。 rotateメソッドでcanvasの変形をしてから、drawImageで貼り付ける transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける

NO IMAGE

canvas.drawImageで貼り付け先のサイズを調整する

位置調整が出来たら、今度は拡大縮小についてです。これについてもいくつかの方法があります。 drawImageメソッドの引数で貼り付けサイズを指定する scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける

NO IMAGE

canvas.drawImageで貼り付け先の位置を調整する

画像を読み込んで貼り付けるところまでは出来たので、今度はcanvas上で貼り付け位置を変える方法について紹介します。これについては2通りの方法があります。 drawImageメソッドの引数で貼り付け座標を指定する translateメソッドでcanvasの変形をしてから、drawImageで貼り付ける

NO IMAGE

canvas.toDataURLメソッドを使う

canvasで描画したデータを、Base64エンコードした文字列で取得するメソッドがtoDataURLです。 これにより、canvasの画像データをGETやPOSTで送信したり、ブラウザのlocalStrageやsessionStrageに保存して後で利用するなどのことが非常にやりやすくなります。ただし、このメソッドは利用する上でいくつかの注意点があります。

NO IMAGE

HTML5/canvas上に読み込んだ画像を貼り付ける

ここからしばらく、HTML5のcanvasについて書こうと思います。 canvasは、何やら新しいもののように思えますが、実際に操作する時に働くのはjavascriptなので、描画に関するルールや関数を覚えてしまえば、あとはスクリプトが書けるかどうかのお話です。

スポンサーリンク
iconDecotter-blog-contents-2




iconDecotter-blog-contents-2