Mais conteúdo relacionado
Semelhante a HTML5のCanvas入門 - Img画像を編集してみよう - (20)
Mais de Toshio Ehara (20)
HTML5のCanvas入門 - Img画像を編集してみよう -
- 7. 例えば、ブラウザに線とか引けます。
!
<canvas id="sample" width="200" height="150"></canvas>
!
var canvas = document.getElementById('sample');
!
var ctx = canvas.getContext('2d');
!
ctx.beginPath();
描画道具
!
Canvas
描画対照から
Context
ctx.moveTo(10, 10);
描画する道具を
ctx.lineTo(40, 40);
!
いただきます。
ctx.stroke();
- 8. 例えば、ブラウザに線とか引けます。
!
<canvas id="sample" width="200" height="150"></canvas>
座標位置を設定して描画できます。
!
!
線が引けた!
var canvas = document.getElementById('sample');
!
var ctx = canvas.getContext('2d');
!
ctx.beginPath();
!
ctx.moveTo(10, 10);
ctx.lineTo(40, 40);
!
ctx.stroke();
- 11. imgとCanvasの下準備…。
(512px)
(512px) のpngを用意しました。
九九衰弱 -iPhoneアプリ https://itunes.apple.com/jp/app/99suizyaku/id571962674
九九の書かれたカードでする神経衰弱ゲーム。間に合わないと爆破しちゃうぞ。
HTMLとCSSはこんな感じで用意しました。
<img id="source_img" />
<canvas id="edit_canvas" width="200" height="200" >
</canvas>
img{
Canvas解像度(200px) ×(200px)
width: 200px; height: 200px;
box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5);
}
canvas{
画面に表示するサイズ
width: 200px; height: 200px;
box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5);
}
- 12. imgデータをロードして…
var $img = $('#source_img');
!
$img.load( drawCanvas );
!
$img.attr(
"src",
"http://jsrun.it/assets/3/F/d/Q/3FdQP.png"
);
!
imgタグに 画像を設定!
imgがload完了後 drawCanvas関数を呼びます。
- 14. そのまま貼付けしてみると…
function drawCanvas( event){
var $img = $( event.target),
imgデータを (0,0)の位置に貼付け
img = $img[0];
Canvasは 200x200なのではみでます!
var $canvas = $( "#edit_canvas");
var ctx = $canvas[0].getContext("2d");
ctx.drawImage( img, 0, 0 );
}
Σ
(
- 16. 爆弾だけ切り取りたい場合は…
function drawCanvas( event){
var $img = $( event.target),
imgの(12,332)から幅高さ100pxを
img = $img[0];
幅200px 縦200pxで描画!
var $canvas = $( "#edit_canvas");
var ctx = $canvas[0].getContext("2d");
ctx.drawImage(img, 12,332,100,100, 0,0,200,200);
}
(
- 19. 30度、60度、90度で回転させてみましょう〜!
ctx.rotate(
30 * Math.PI / 180);
ctx.drawImage( img, 0, 0 , 200, 200);
ctx.rotate(
60 * Math.PI / 180);
ctx.drawImage( img, 0, 0 , 200, 200);
ctx.rotate(
90 * Math.PI / 180);
ctx.drawImage( img, 0, 0 , 200, 200);
(
あれっ?消えたよ..
- 26. Canvasの描画内容をBase64形式で取得出来ます。
var $canvas = $( "#edit_canvas");
var ctx = $canvas[0].getContext("2d");
ctx.translate(
ctx.rotate(
100,
100 );
90 * Math.PI / 180);
Base64形式で取得!
ctx.translate( -100, -100 );
ctx.drawImage( img, 0, 0 , 200, 200);
var base64Data = $canvas[0].toDataURL("image/png");
$('#out_img').attr( "src", base64Data);
canvasタグ
imgタグ
この例は、作成したBase64形式のデー
タをimgタグのsrcに指定しています。
文字列なのでサーバに送信してサーバ
側でPNG画像にする事も可能です。