为什么我的文字有时候能显示，有时没有，并且有些要点击2次才有效果

Question

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

Answer 1

恩，刚贴错了。