HTML5 canvas基本绘图之图形组合
程序员文章站
2023-11-26 17:09:40
是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之图形组合方法，感兴趣的小伙伴们可以参考一下... 16-06-27...
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：
1.获取<canvas>元素对应的dom对象，这是一个canvas对象；
2.调用canvas对象的getcontext()方法，得到一个canvasrenderingcontext2d对象；
3.调用canvasrenderingcontext2d对象进行绘图。
图形组合：
•globalalpha： 设置或返回绘图的当前 alpha 或透明值
该方法主要是设置图形的透明度，这里就不具体介绍。
•globalcompositeoperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：
下面是一个小示例，可以通过点击改变组合效果：
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>图形组合</title>
- <style type="text/css">
- #canvas{
- border: 1px solid #1c0efa;
- display: block;
- margin: 20px auto;
- }
- #buttons{
- width: 1000px;
- margin: 5px auto;
- clear:both;
- }
- #buttons a{
- font-size: 18px;
- display: block;
- float: left;
- margin-left: 20px;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="800">
- 你的浏览器还不支持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="#">copy</a>
- <a href="#">xor</a>
- </div>
- </body>
- <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(compositestyle){
- var canvas = document.getelementbyid("canvas");
- var context = canvas.getcontext("2d");
- context.clearrect(0, 0, canvas.width, canvas.height);
- //draw title
- context.font = "bold 40px arial";
- context.textalign = "center";
- context.textbasedline = "middle";
- context.fillstyle = "#150e0e";
- context.filltext("globalcompositeoperation = "+compositestyle, canvas.width/2, 60);
- //draw a rect
- context.fillstyle = "#f6082a";
- context.fillrect(300, 150, 500, 500);
- //draw a triangle
- 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中原生的右键菜单创建方法
下一篇： HTML5之tabindex属性全面解析