Web canvas.drawImagで貼り付ける画像を回転させる
さて今度は回転の話です。これはdrawImageの引数では指定できませんので、変形マトリックスを使います。これもまた2通りのやり方があります。 rotateメソッドでcanvasの変形をしてから、drawImageで貼り付ける transf...
HTML
Web Web canvas.drawImageで貼り付け先のサイズを調整する
位置調整が出来たら、今度は拡大縮小についてです。これについてもいくつかの方法があります。 drawImageメソッドの引数で貼り付けサイズを指定する scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける tran...
Web canvas.drawImageで貼り付け先の位置を調整する
画像を読み込んで貼り付けるところまでは出来たので、今度はcanvas上で貼り付け位置を変える方法について紹介します。これについては2通りの方法があります。 drawImageメソッドの引数で貼り付け座標を指定する translateメソッド...
Web canvas.toDataURLメソッドを使う
canvasで描画したデータを、Base64エンコードした文字列で取得するメソッドがtoDataURLです。 toDataURL() メソッド - Canvasリファレンス - HTML5.JP これにより、canvasの画像データをGET...
Web HTML5/canvas上に読み込んだ画像を貼り付ける
ここからしばらく、HTML5のcanvasについて書こうと思います。 canvasは、何やら新しいもののように思えますが、実際に操作する時に働くのはjavascriptなので、描画に関するルールや関数を覚えてしまえば、あとはスクリプトが書け...