為什么每次刷新才能正常實(shí)現(xiàn)每個(gè)屬性值
<canvas id="mycanvas" width="1000" height="500">你的瀏覽器不支持畫(huà)布</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
在一個(gè)context內(nèi)部，切換設(shè)置globalCompositeOperation，有些不會(huì)出效果的問(wèn)題，在canvas書(shū)籍上，我沒(méi)有發(fā)現(xiàn)任何一本書(shū)提到過(guò)。
這個(gè)問(wèn)題也是折磨了我兩天，認(rèn)真看了看老師的代碼，我發(fā)現(xiàn)原因了。
也就是說(shuō)你需要重新獲取一次上下文，再進(jìn)行設(shè)置就沒(méi)有問(wèn)題了。
你仔細(xì)看看你的代碼和老師的代碼有什么區(qū)別。 老師在每一次的點(diǎn)擊重新繪制事件處理中，都是重新獲取了一次上下文。明白了吧。重點(diǎn)在這里。和a標(biāo)簽是否返回false沒(méi)有一點(diǎn)關(guān)系。
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標(biāo)簽?<a href="#">xor</a>，的#都改成 javascript:; 如?<a href="javascript:;">xor</a>