HTML5 canvas基本绘图之图形组合_HTML5教程-查字典教程网
HTML5 canvas基本绘图之图形组合
HTML5 canvas基本绘图之图形组合
发布时间:2017-01-07 来源:查字典编辑
摘要:只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在>元素上绘图主要有三步:1.获取元素对...

<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教程学习
    热门HTML5教程学习
    网页设计子分类