liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のcanvas要素 - 合成(composite)制御

<!DOCTYPE html>
<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">
   // canvas要素取得
   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>

f:id:liguofeng29:20160124195105g:plain