<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>