<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：
1.获取<canvas>元素对应的dom对象，这是一个canvas对象；
2.调用canvas对象的getcontext()方法，得到一个canvasrenderingcontext2d对象；
3.调用canvasrenderingcontext2d对象进行绘图。
图形组合：
•globalalpha： 设置或返回绘图的当前 alpha 或透明值
该方法主要是设置图形的透明度，这里就不具体介绍。
•globalcompositeoperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：
下面是一个小示例，可以通过点击改变组合效果：
xml/html code
复制内容到剪贴板
<!doctypehtml><htmllang=“en”><head><metachart=“utf-8”><title>图形组合</title><styletype=“text/css”>#canvas{ border:1pxsolid#1c0efa; display:block; margin:20pxauto; } #buttons{ width:1000px; margin:5pxauto; clear:both; } #buttonsa{ font-size:18px; display:block; float:left; margin-left:20px; } </style></head><body><canvasid=“canvas”width=“1000”height=“800”>你的浏览器还不支持canvas </canvas>大学课堂<divid=“buttons”><ahref=“#”>source-over</a><ahref=“#”>source-atop</a><ahref=“#”>source-in</a><ahref=“#”>source-out</a><ahref=“#”>destination-over</a><ahref=“#”>destination-atop</a><ahref=“#”>destination-in</a><ahref=“#”>destination-out</a><ahref=“#”>lighter</a><ahref=“#”>copy</a><ahref=“#”>xor</a>摩天轮 罗百吉
</div></body><scripttype=“text/javascript”>window.onload=freezefunction(){ draw(“source-over”); varbuttons=document.getelementbyid(“buttons”).getelementsbytagname(“a”); for(vari=0;i<buttons.length;i++){ buttons[i].onclick=function(){ draw(this.text); returnfal; }; } }; functiond边城全文raw(compositestyle){ varcanvas=document.getelementbyid(“canvas”); varcontext=canvas.getcontext(“2d”); context.clearrect(0,0,canvas.width,canvas.height); //drawtitle context.font=“bold40pxarial”; context.textalign=“center”; context.textbadline=“middle”; context.f詹姆斯生涯十佳球illstyle=“#150e0e”; context.filltext(“globalcompositeoperation=“+compositestyle,canvas.width/2,60); //drawarect context.fillstyle=“#f6082a”; context.fillrect(300,150,500,500); //drawatriangle context.globalcompositeoperation=compositestyle; context.fillstyle=“#1611f5”; context.beginpath(); context.moveto(700,250); context.lineto(1000,750); context.lineto(400,750); context.clopath(); context.fill(); } </script></html>读者可以点击标签来观察不同的组合效果，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
