canvas画线条,html5 canvas绘图
怎么画线？这和现实中的绘画很相似：
1.移动画笔，使它移动到绘画的开始。
2.确定第一个冲程的停止点
3.规划好后，选择笔刷(包括笔刷的粗细和颜色等。)
4.一定要画
因为Canvas是基于状态的绘制(非常重要，后面会解释)，第一步是确定状态，最后一步将是具体的绘制。
1.移动画笔(moveTo())
我们之前已经获得了画笔上下文，所以以此为例，我们给出一个修改方法的使用示例，——context.moveTo(100，100)。这个代码的意思是把画笔移动到点(100，100)(单位是px)。记住，这里画布左上角是笛卡尔坐标系的原点，Y轴正方向向下，X轴正方向向右。
2.笔画停止点(lineTo())
同样，context.lineTo(600，600)。这句话的意思是从上一笔的停止点画到这里的(600，600)。但是，要清楚的是，这里的move to () ``` lineto()只是一种状态。这是个计划。我准备画，但是还没开始画。这只是一个计划！
3.选择画笔
现在让我们设置笔刷的颜色和厚度。
Context.lineWidth=5，表示将画笔(线条)的粗细设置为10px。
Context.strokeStyle=#AA394C ，意思是将画笔(线条)的颜色设置为玫瑰红。
因为Canvas是基于状态绘制的，所以我们选择画笔的粗细和颜色以及线条的粗细和颜色。
4.一定要画
确保只有两种绘制方式，fill()和stroke()。有一些绘画基础的人应该知道，前者是指填充，后者是指笔触。因为我们只画线，所以只需要笔画。只需调用代码context.stroke()。
画一个线条只是一个线段！这么多废话！那我们开始画吧。
将JavaScript代码内容编码到剪贴板！doctype HTML HTML lang= zh head meta charaset= UTF-8 title from the line/title/headbydivid= canvas-warp canvas id= canvas style= border:1 px solid # aaaaaa；显示：块； margin:50px auto；你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context.moveTo(100，100)；context.lineTo(600，600)；context . line width=5；context . stroke style= # aa 394 c ；context . stroke()；}/script/body/html html运行结果：
(朋友们一直问我页面右下角的熊是什么鬼？哦，之前忘了解释，那是我的防伪水印！)
我还标记了一个页面分析图，供你参考。
这里，我从原来的canvas标记中删除了width和height，但是在JavaScript代码中设置了canvas对象的width和height属性。
总结：只有两种方法可以设置画布的大小。
1.在画布页签中设置；
2.用JS代码设置canvas的属性。
怎么样？是不是很爽？接下来，我们要加快步伐，画一个多线图。你觉得你离成为艺术家更近了一步吗？虽然这只是一个简单的线段，但这幅画对我们来说只是一小步，对人类来说却是一个巨大的飞跃！
绘制折线以上，我们已经成功绘制了一条线段。那么，如果我想用两笔甚至多笔画一条折线呢？
聪明的朋友一定想到了。不简单，重用lineTo()就行了。下面，我出丑了，随便画了一条漂亮的折线~
将JavaScript代码内容编码到剪贴板！doctype HTML HTML lang= zh headmethacharaset= UTF-8 title Draw polyline/title/headbydivid= canvas-warp canvas id= canvas style= border:1 px solid # aaaaaa；显示：块； margin:50px auto；你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context.moveTo(100，100)；context.lineTo(300，300)；context.lineTo(100，500)；context . line width=5；context . stroke style= # aa 394 c ；context . stroke()；}/script/body/html html运行结果：
绘制多条折线同理，想画多条不同风格的折线，应该怎么做？比如我们在这里画三条虚线，分别是红、蓝、黑。聪明的朋友一定想到了。不容易。翻译一下，把画笔的颜色改一下就行了。代码格式一样，复制就好。代码如下。
将JavaScript代码内容编码到剪贴板！doctype HTML HTML lang= zh headmethacharaset= UTF-8 title Draw polyline/title/headbydivid= canvas-warp canvas id= canvas style= border:1 px solid # aaaaaa；显示：块； margin:50px auto；你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context.moveTo(100，100)；context.lineTo(300，300)；context.lineTo(100，500)；context . line width=5；context.strokeStyle= redcontext . stroke()；context.moveTo(300，100)；context.lineTo(500，300)；context.lineTo(300，500)；context . line width=5；context.strokeStyle= bluecontext . stroke()；context.moveTo(500，100)；context.lineTo(700，300)；context.lineTo(500，500)；context . line width=5；context.strokeStyle= blackcontext . stroke()；}/script/body/html html运行结果：
呃？是不是很奇怪？那么红色，蓝色，黑色呢？为什么都是黑色的？其实这里的原因是我一直强调——Canvas是基于状态的绘制。
你什么意思？实际上，这段代码每次使用stroke()时，都会重新绘制之前设置的状态。第一笔()，画一条红色虚线；第二笔()会重画之前的红色折线，但这次画笔换成了蓝色，所以画出来的折线都是蓝色的。换句话说，strokeStyle属性被重写。同样，第三次画图时，画笔颜色是最后的黑色，所以会重画三条黑色折线。所以这里看到的三条折线，其实是画了三遍，一共画了六条折线。
所以，我想画三条虚线。没有办法吗？艺术家的灵魂到此为止了吗？是不是没希望了？不，还有一个办法。
使用beginPath()开始绘制。
为了让画图方法不重复画图，我们可以在每次画图之前加上beginPath()，代表下一次画图的起点在beginPath()之后的代码。我们在绘制三次之前添加context.beginPath()。
Java Script语言代码复制内容到剪贴板！DOCTYPEhtml htmllang=zh head元字符集=UTF八号标题绘制折线/title/head body divid= canvas-warp canvasid= canvas style= border:1px solid # aaaaaa；显示：块；保证金：50pxauto 你的浏览器居然不支持画布？赶快换一个吧！/画布/div脚本窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=600 var context=canvas获取上下文(“2d”)；语境。begin path()；context.moveTo(100，100)；context.lineTo(300，300)；context.lineTo(100，500)；语境。线宽=5；context . stroke style= red context。笔画()；语境。begin path()；context.moveTo(300，100)；context.lineTo(500，300)；context.lineTo(300，500)；语境。线宽=5；context . stroke style= blue context。笔画()；语境。begin path()；context.moveTo(500，100)；context.lineTo(700，300)；context.lineTo(500，500)；语境。线宽=5；context . stroke style= black context。笔画()；}/脚本/正文/html
可以看到，这里得到了我们预想的结果。因为使用了beginPath()，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线beginPath()是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法描边()、填充()或者closePath()，至于closePath()之后会讲到。
所以我们每次开始绘制前都务必要使用beginPath()，为了代码的完整性，建议大家在每次绘制结束后使用closePath()。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。