HTML5 canvas基本绘图之图形组合

2020-03-24 18:20:18

字体：大中小

来源：转载

供稿：网友

canvas /canvas 只是一个绘制图形的容器，除了id、html' target='_blank'>class、style等属性外，还有height和width属性。在 canvas 元素上绘图主要有三步： 1.获取 canvas 元素对应的DOM对象，这是一个Canvas对象；
2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3.调用CanvasRenderingContext2D对象进行绘图。图形组合： globalAlpha：设置或返回绘图的当前 alpha 或透明值该方法主要是设置图形的透明度，这里就不具体介绍。 globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：下面是一个小示例，可以通过点击改变组合效果：XML/HTML Code复制内容到剪贴板
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 /htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html5 touch事件实现触屏页面上下滑动(一)

下一篇：XHTML入门学习教程-XHTML超级链接