<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
<title> 合成制御 </title>
</head>
<body>
<h2> 合成制御サンプル </h2>
オプション選択<select style="width:160px" onchange="draw(this.value);";>
<option value="source-over">source-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="source-atop">source-atop</option>
<option value="destination-over">destination-over</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="destination-atop">destination-atop</option>
<option value="lighter">lighter</option>
<option value="xor">xor</option>
<option value="copy">copy</option>
</select><br/>
<canvas id="canvas" width="400" height="200"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var draw = function(compositeOper)
{
ctx.save();
ctx.clearRect(0, 0, 400, 200);
ctx.fillStyle = '#f00';
ctx.fillRect(30, 20, 160, 100);
ctx.globalCompositeOperation = compositeOper
ctx.fillStyle = '#0f0';
ctx.fillRect(120, 60, 160, 100);
ctx.restore();
}
draw("source-over");
</script>
</body>
</html>