<!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>
- 3 回答
- 1 关注
- 1123 浏览
添加回答
举报
0/150
提交
取消