<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> <metacharset="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=function(){ draw("source-over"); varbuttons=document.getElementById("buttons").getElementsByTagName("a"); for(vari=0;i<buttons.length;i++){ buttons[i].onclick=function(){ draw(this.text); returnfalse; }; } }; functiondraw(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.textBasedline="middle"; context.fillStyle="#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.closePath(); context.fill(); } </script> </html>
读者可以点击标签来观察不同的组合效果，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【HTML5 canvas基本绘图之图形组合】相关文章：
★ 利用HTML5 Canvas制作键盘及鼠标动画的实例分享
★ 实例讲解利用HTML5 Canvas API操作图形旋转的方法