<canvas id="mycanvas" width="1000" height="500">你的浏览器不支持画布</canvas>

<p id="composition">

         <a href="#">source-over</a>

         <a href="#">source-in</a>

         <a href="#">source-out</a>

         <a href="#">source-atop</a>

         <a href="#">destination-over</a>

         <a href="#">destination-in</a>

         <a href="#">destination-out</a>

         <a href="#">destination-atop</a>

         <a href="#">lighter</a>

         <a href="#">copy</a>

         <a href="#">xor</a>

</p>

<script>

var mycanvas=document.getElementById('mycanvas');

var context=mycanvas.getContext('2d');

function drawComposition(composition){

        context.clearRect(0,0,1000,500);

         context.save();

         context.font="30px bold Arial";

         context.textAlign="center";

         context.textBaseline="middle";

         context.fillStyle="#058";

         context.shadowColor="blue";

         context.shadowOffsetX=2;

         context.shadowOffsetY=2;

         context.shadowBlur=2;

         context.fillText("globalCompositionOperation",500,20);

         context.restore();

         context.fillStyle="red";

         context.beginPath();

         context.moveTo(500,100);

         context.lineTo(350,250);

         context.lineTo(650,250);

         context.closePath();

         context.fill();

         context.globalCompositeOperation=composition;

         context.fillStyle="blue";

         context.fillRect(500,175,200,200);

}

var a=document.getElementById('composition').getElementsByTagName('a');

for(var i=0;i<a.length;i++){

     a[i].onclick=function(){

     drawComposition(this.innerHTML);

}

}

</script>