canvas动态绘制线条,canvas绘制直线
canvas/canvas是HTML5中的新标签，用来画图形。其实这个标签和其他标签一样，特殊之处在于它可以得到一个CanvasRenderingContext2D对象，这个对象可以通过JavaScript脚本来控制绘制。
canvas/canvas只是一个绘制图形的容器。除了id，class，style等属性，还有高度和宽度属性。在画布上绘制元素有三个主要步骤：
1.获取canvas元素对应的DOM对象，这是一个Canvas对象；
2.调用CanvasRenderingContext2D对象的getContext()方法；
3.调用CanvasRenderingContext2D对象进行绘制。
线条属性
除了上面使用的线宽属性，线条还有以下属性：
•lineCap属性设置或返回行尾线帽的样式，可采用以下值：
“对接”在线的每一端添加一条直边(默认)；
“round”在线的每一端添加一个圆帽；
“square”为线条的每一端添加一个方形帽。
•lineJoin属性设置或返回两条线相交时创建的角的类型，可以采用以下值：
“斜接”创建尖角(默认)；
“倒角”创建一个倒角；
圆形创建圆角。
•miterLimit属性设置或返回最大斜接长度(默认值为10)。斜接长度是指两条直线相交处内角和外角之间的距离。仅当lineJoin属性为“miter”时，MiterLimit才有效。
将JavaScript代码内容编码到剪贴板
var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；//测试lineCap属性//设置基线观察context.moveTo(10，10)；context.lineTo(10，200)；context.moveTo(200，10)；context.lineTo(200，200)；context.lineWidth= 1context . stroke()；//butt context . begin path()；context.moveTo(10，50)；context.lineTo(200，50)；context.lineCap= buttcontext.lineWidth= 10context . stroke()；//round context . begin path()；context.moveTo(10，100)；context.lineTo(200，100)；context.lineCap= roundcontext.lineWidth= 10context . stroke()；//square context . begin path()；context.moveTo(10，150)；context.lineTo(200，150)；context.lineCap= squarecontext.lineWidth= 10context . stroke()；//测试linJoin属性//miter context . begin path()；context.moveTo(300，50)；context.lineTo(450，100)；context.lineTo(300，150)；context.lineJoin= mitercontext.lineWidth= 10context . stroke()；//round context . begin path()；context.moveTo(400，50)；context.lineTo(550，100)；context.lineTo(400，150)；context.lineJoin= roundcontext.lineWidth= 10context . stroke()；//square context . begin path()；context.moveTo(500，50)；context.lineTo(650，100)；context.lineTo(500，150)；context.lineJoin= bevelcontext.lineWidth= 10context . stroke()；//测试miterLimit属性context . begin path()；context.moveTo(700，50)；context.lineTo(850，100)；context.lineTo(700，150)；context.lineJoin= mitercontext . miter limit=“2”；context.lineWidth= 10context . stroke style= # 2913 EC ；context . stroke()；每个属性的不同值的效果如下：
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。