忍者ブログ

30Mar

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

02Apr

キャンバスの一部をコピー&ペースト(getImageData、putImageData)

Posted by No Name Ninja in Javascript Sample

キャンバスの一部をコピーして、再レンダリングする方法です。contextオブジェクトのgetImageData、putImageData

DEMO
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  //画像を表示
  var curImage = new Image();
  curImage.src = 'test.jpg';
  curImage.onload = function(){
    ctx.drawImage(curImage, 0,0,200,200);

    キャンバスのイメージの一部をコピー
    var imgData = ctx.getImageData(100, 100, 150, 150);
    座標を指定してペースト
    ctx.putImageData(imgData, 300, 300);
  }

同一キャンバスじゃなくても別のキャンバスからコピペすることが可能です。

PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字