想試著做一個(gè)composite的演示，但是無法將<a>的文本賦到變量中，這是為什么呢？
這是html：
<!doctype?html>
<html>
<head>
????<meta??charset="utf-8"></meta>
????<title>合成屬性演示</title>
????<script?type="text/javascript"?src="合成.js"></script>
????<style?type="text/css">
????#buttons{
????????width:600px;
????????font:14px?微軟雅黑;
????????color:?#0277bf;
????}
????????
????#buttons?a{
????????text-decoration:?none;
????????
????}
????</style>
</head>
<body>
????<canvas?id='canvas'>看到這段文字請更換瀏覽器</canvas>
????<div?id='buttons'>
????<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>
????</div>
</body>
</html>這是js：
window.onload?=?function(){
????var?canvas?=?document.getElementById('canvas');
????var?context?=?canvas.getContext('2d');
????var?buttons?=?document.getElementById('buttons');
????var?aS?=?buttons.getElementsByTagName('a');
????var?compositeType?=?'source-out';
????
????for(var?i?=?0;i<aS.length;i++){
????????aS[i].onclick?=?function(){
????????????compositeType?=?this.text;
????????}
????}
????
????canvas.width?=?600;
????canvas.height?=?400;
????
????context.globalAlpha?=?1;
????context.globalCompositeOperation?=?compositeType;
????
????context.beginPath();
????context.rect(100,100,200,100);
????context.fillStyle?=?'red';
????context.fill();
????context.closePath();
????
????context.beginPath();
????context.arc(300,200,75,0,2*Math.PI);
????context.fillStyle?=?'blue';
????context.fill();
????context.closePath();
????
?
}
2016-05-20
把繪制的過程封裝成一個(gè)函數(shù)啊，，然后把?compositeType 作為參數(shù)傳進(jìn)去，， 你這樣寫把值都寫死了，，雖然每次點(diǎn)擊按鈕都能改變?compositeType 的值，，但是并不會把?compositeType 給他?context.globalCompositeOperation，，因?yàn)槟阆旅娴膶懙睦L制過程只會執(zhí)行一次，，每次點(diǎn)擊按鈕他們并不會執(zhí)行，，