サイト内検索

getImageData() / putImageData() メソッド

コピー元の canvas

コピー先のcanvas

コード

var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
/* 半透明度を指定 */
ctx.globalAlpha = 0.7;
/* 円 #1 */
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #2 */
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 緑
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #3 */
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
/* canvasに描いた図形から中心部分のイメージを抜き出す */
var image = ctx.getImageData(45, 45, 50, 50);
/* 2つ目のcanvas左上に抜き出したイメージを貼り付ける */
var canvas2 = document.getElementById('c2');
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "black";
ctx2.fillRect(0, 0, 140, 140);
ctx2.putImageData(image, 10, 10);