１つの canvas の絵を別の canvas へ描画しようと思って context.getImagedata() と context.putImagedata() を使ってみたのですがアルファ値を無視してしまうのでアルファブレンド出来ないんですね・・・
うーん、困った～と思ってHTML5.JP（何時もお世話になってます）を物色していたら、なんと context.drawImage() には canvas 要素が設定できるとのこと。
早速試してみる。検証コードは以下の通り。
<!DOCTYPE html>
<html lang="jp" >
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function ge(id) { return document.getElementById(id); }
window.onload = function(){
var canvas1 = ge("canvas1");
var con1 = canvas1.getContext("2d");
con1.fillStyle = "blue"; // 背景を青に
con1.fillRect(0,0,320,460);
var canvas2 = ge("canvas2");
canvas2.style.display = "none";
var con2 = canvas2.getContext("2d");
con2.fillStyle = 'rgba(255,255,255,0.0)';
con2.strokeStyle = 'rgba(255,255,255,0.0)';
con2.lineWidth = 0;
con2.fillRect(0,0,100,100);
con2.fillStyle = 'rgba(255,0,0,0.5)'; // 透明度50%の赤で
con2.beginPath();
con2.arc(50, 50, 50, 0, 2*Math.PI); // 円を描画
con2.fill();
con1.drawImage( canvas2, 100, 100 );
}
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="100" height="100"></canvas>
</body>
</html>
なるほど、確かに HTML５の canvas 要素は context.drawImage() で描画出来ました。
0 件のコメント:
コメントを投稿