html canvas 绘图,利用canvas绘制图形

　　canvas/canvas只是一个绘制图形的容器，除了身份证，类别、风格等属性外，还有高度和宽度属性。在帆布元素上绘图主要有三步：

　　1.获取帆布元素对应的数字正射影像图对象，这是一个帆布对象；

　　2.调用帆布对象的getContext()方法，得到一个CanvasRenderingContext2D对象；

　　3.调用CanvasRenderingContext2D对象进行绘图。

　　图形组合：

　　•globalAlpha：设置或返回绘图的当前希腊字母的第一个字母或透明值

　　该方法主要是设置图形的透明度，这里就不具体介绍。

　　•globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：

　　下面是一个小示例，可以通过点击改变组合效果：

　　XML/HTML代码复制内容到剪贴板！DOCTYPEhtml htmllang=en head元字符集=UTF八号标题图形组合/title style type= text/CSS # canvas { border:1 px solid # 1c 0 EFA；显示：块；保证金：20pxauto} #按钮{宽度：1000 px保证金：5pxauto明确：两者都有；} # button sa { font-size:18px；显示：块；浮动：左；左边距：20px }/style/head body canvasid= canvas width= 1000 height= 800 你的浏览器还不支持canvas/canvas divide= buttons ah ref= # source-over/a ah ref= # source-atop/a ah ref= # source-in/a ah ref= # destination-atop/a ah ref= # destination-in/a ah ref= # destination-out/a ah ref= # lighter/a ah ref= # copy/a ah ref= # xor/a/div var buttons=document。getelementbyid(“buttons”).getElementsByTagName( a )；for(vari=0；ibuttons.lengthi ){ buttons[i].onclick=function(){ draw(this。正文)；返回假的；};} };函数draw(复合样式){ var canvas=document。getelementbyid(“canvas”)；var context=画布。获取上下文(“2d”)；context.clearRect(0，0，canvas.width，canvas。身高)；//绘制标题上下文。font= bold 40 px arialcontext . textalign= center context。基于文本的行= middle语境。填充样式= # 150 e0e语境。填充文本( globalCompositeOperation= composite style，canvas.width/2，60)；//绘制上下文。填充样式= # f 6082 acontext.fillRect(300，150，500，500)；//drawatriangel上下文。globalcompositeoperation=复合样式；语境。填充样式= # 1611 F5语境。begin path()；context.moveTo(700，250)；语境。行到(1000750)；context.lineTo(400，750)；语境。关闭路径()；语境。fill()；}/脚本/html读者可以点击标签来观察不同的组合效果，效果如下：

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。