canvas动态绘制线条,canvas画线

　　canvas/canvas是HTML5中的新标签，用来画图形。其实这个标签和其他标签一样，特殊之处在于它可以得到一个CanvasRenderingContext2D对象，这个对象可以通过JavaScript脚本来控制绘制。

　　canvas/canvas只是一个绘制图形的容器。除了id，class，style等属性，还有高度和宽度属性。在画布上绘制元素有三个主要步骤：

　　1.获取canvas元素对应的DOM对象，这是一个Canvas对象；

　　2.调用CanvasRenderingContext2D对象的getContext()方法；

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

　　绘制线段moveTo()和lineTo()

　　下面是一个简单的画布绘制示例：

　　XML/HTML代码将内容复制到剪贴板！doctype HTML HTML lang= en head meta charaset= UTF-8 Title canvas绘图演示/Title style type= text/CSS # canvas { border:1 px solid # adacb 0；显示：块；保证金：20pxauto}/style/head body canvas id= canvas width= 300 height= 300 您的浏览器不支持canvas/canvas/body script type= text/JavaScript var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；//将对象起点和终点context.moveTo设置为(10，10)；context.lineTo(200，200)；//设置样式context . line width=2；context . stroke style= # f 5270 b ；//Draw context . stroke()；/script /html

　　如果moveTo()没有特别指定，lineTo()的起点就是上面的点。因此，如果需要重新选择起始点，就需要使用moveTo()方法。如果需要样式化不同的线段，需要通过context.beginPath()重新打开一个路径。这里有一个例子：

　　代码将内容复制到剪贴板script type= text/JavaScript var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；//设置对象起点和终点context . begin path()；context.moveTo(100，100)；context.lineTo(700，100)；context.lineTo(700，400)；context . line width=2；context . stroke style= # f 5270 b ；//Draw context . stroke()；context . begin path()；context.moveTo(100，200)；//这里把moveTo改成lineTo的效果是一样的context.lineTo(600，200)；context.lineTo(600，400)；//如果//strokeStyle的颜色有了新值，上面设置的值将被覆盖。//如果//lineWidth没有新值，则根据上面设置的值显示context . stroke style= # 0d 25 f 6 ；//Draw context . stroke()；/脚本

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

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