<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#buttons{margin:50px 10%;}
#buttons a{margin-top:50px;margin-right:10px;text-decoration:none;font-size:20px;color:black;padding:5px;border:1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" height="800" width="1200" style="margin: 0 20%;border:1px solid black;">此浏览器不支持canvas,请更换浏览器</canvas>
<div id="buttons">
<a href="#">source-over</a>
<a href="#">source-atop</a>
<a href="#">source-in</a>
<a href="#">source-out</a>
<a href="#">destination-over</a>
<a href="#">destination-atop</a>
<a href="#">destination-in</a>
<a href="#">destination-out</a>
<a href="#">lighter</a>
<a href="#">xor</a>
<a href="#">copy</a>
</div>
<script type="text/javascript">
window.onload=function(){
draw("source-over");
var buttons=document.getElementById("#buttons").getElementsByTagName("a");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
draw(this.text);
return false;
}
}
}
function draw(x){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
/**清空画布**/
context.clearRect(0,0,canvas.width,canvas.height);
/**标题**/
context.font="bold 40px sans-serif";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("globalCompsitionOperation的值为："+x,canvas.width/2,60);
/**方框**/
context.fillStyle="blue";
context.fillRect(300,150,500,500);
context.globalCompositeOperation =x;
/**三角形**/
context.fillStyle="red";
context.beginPath();
context.moveTo(700,250);
context.lineTo(1000,750);
context.lineTo(400,750);
context.closePath();
context.fill();
}
</script>
</body>
</html>
选择button那里吧＃号去掉