為什么每次刷新才能正常實現每個屬性值
<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>
2017-08-27
在一個context內部，切換設置globalCompositeOperation，有些不會出效果的問題，在canvas書籍上，我沒有發現任何一本書提到過。
這個問題也是折磨了我兩天，認真看了看老師的代碼，我發現原因了。
也就是說你需要重新獲取一次上下文，再進行設置就沒有問題了。
你仔細看看你的代碼和老師的代碼有什么區別。 老師在每一次的點擊重新繪制事件處理中，都是重新獲取了一次上下文。明白了吧。重點在這里。和a標簽是否返回false沒有一點關系。
2016-10-30
方法一：
var a=document.getElementById('composition').getElementsByTagName('a');
????for(var i=0;i<a.length;i++){
???????? a[i].onclick=function(){
????? ? ? ? ? ?drawComposition(this.innerHTML);
????? ? ? ? ?return false;
????}
}
方法2：
????所有的a標簽?<a href="#">xor</a>，的#都改成 javascript:; 如?<a href="javascript:;">xor</a>