キャンバスで遊び中 - globalCompositeOperation 描画結果一覧

JS

http://www.fujidig.com/misc/js/canvas/composite.html

描画結果

Firefox 3.0 RC2 ( Ubuntu 8.04 )

Opera 9.5 ( Ubuntu 8.04 )

Safari 3.1.1 ( Windows XP Home SP2 )

Google Chrome 2.0.166.1

プログラム

<body>
<style>
body { background-color: #ffc; }
canvas { border : 1px solid black; margin: 5px; }
</style>
<script type="text/javascript">
var circleImg = function(){
	var canvas = document.createElement('canvas');
	canvas.width = 110;
	canvas.height = 110;
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = 'rgba(255, 70, 70, 0.5)';
	ctx.beginPath();
	ctx.arc(55, 55, 55, 0, Math.PI * 2, true);
	ctx.fill();

	ctx.fillStyle = 'rgba(255, 70, 70, 1.0)';
	ctx.beginPath();
	ctx.arc(55, 55, 40, 0, Math.PI * 2, true);
	ctx.fill();
	return canvas;
}();


var compositeTypes = [
  'source-over','source-in','source-out','source-atop',
  'destination-over','destination-in','destination-out','destination-atop',
  'lighter','darker','copy','xor'
];


var table = document.createElement('table');
var tr;
for( var i = 0; i < compositeTypes.length; i++ ) {
	var compositeType = compositeTypes[i];
	if (i % 4 == 0) {
		tr = table.appendChild(document.createElement('tr'));
	}
	var td = document.createElement('td');
	tr.appendChild(td);
	td.appendChild(document.createTextNode(compositeType));
	td.appendChild(document.createElement('br'));
	var canvas = td.appendChild(document.createElement('canvas'));
	canvas.width = 160;
	canvas.height = 160;
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = 'rgba(40, 120, 255, 0.5)';
	ctx.fillRect(10, 10, 100, 100);
	ctx.fillStyle = 'rgba(40, 120, 255, 1.0)';
	ctx.fillRect(25, 25, 70, 70);
	ctx.globalCompositeOperation = compositeType;
	ctx.drawImage(circleImg, 40, 40);
}
document.body.appendChild(table);


</script>
</body>