canvas画线,canvas动态绘制线条
学习画布首先要知道如何画线段，然后才能通过许多简单的线段实现更复杂的图形。比如常见的图表、直方图、折线图等。都是由线段实现的。
基础知识
画布没有太多的基础知识，主要会画线段、图形、图片、文字等。可以在浏览器中绘制画布，也可以借助node-canvas在节点服务器上绘制简单的图片。本文仅记录浏览器中的绘图。至于节点端怎么画，可以自己去查相关资料。
在浏览器中绘图时，首先在html中定义画布元素。默认宽度和高度为300 * 150，可以通过宽度和高度设置。注意canvas元素样式宽度和高度和canvas绘制canvas宽度和高度不是一回事，后面会讨论。
Canvas ID= Canvas当前浏览器不支持canvas。请升级您的浏览器。/p/canvas在绘制之前，我们需要获取当前画布的2d绘制上下文，然后我们总是通过操作上下文来进行绘制。
let canvas=document . query selector( # canvas )；如果(！canvas) {抛出新错误(找不到canvas元素)；}//注2d。参数必须小写；//通过设置参数为webgl，可以得到3d绘图上下文let CTX=canvas . get context( 2d )；注意：上面的代码片段在后面的例子中会被忽略，ctx变量会直接用来表示canvas的2d绘制上下文。
我们来看看canvas 2d画图中的坐标系。目前canvas元素左上角为坐标原点(0，0)，水平向右为X轴正方向，垂直向下为Y轴正方向，如下图所示。可以对坐标系进行平移、旋转、缩放，实现一些动画，动画知识部分会有详细讲解。
线段
绘制简单线段时，通常先设置线段的样式，如颜色、线宽、线端点样式等。我们通过设置strokeStyle来设置ctx的全局绘制样式，可以是rgba或者法定十六进制颜色值，也可以是渐变对象等。下面的代码只是从(10，10)到(50，60)画了一条宽度为10的红色线段。
ctx.strokeStyle= redctx.lineWidth=10ctx.moveTo(10，10)；ctx.lineTo(50，60)；CTX . stroke()；
我们先来看看绘制线段相关的方法和属性。
相关属性：
LineCap，它告诉浏览器如何绘制线段的端点。可选值为以下三个值之一：对接、圆形、方形。默认为Butt。线宽，决定线段的像素宽度。必须为非负、非无穷大，默认值为1.0。LineJoin，确定两条线段相交时如何绘制焦点，只有当两条线段方向不同时才会生效。值：斜面、圆形、斜接。默认情况下为斜接。MiterLimit，它告诉浏览器如何以斜接的形式绘制线段焦点。仅当lineJoin=miter 有效时，默认值为10.0。LineDashOffset，设置虚线的偏移量，默认为0.0。相关方法：
BeginPath，它通过清除当前路径中的所有子路径来重置当前路径。一般在绘制封闭图形时应该先调用它。ClosePath，显示的封闭路径。此方法用于由曲线或线段创建的封闭圆弧路径和开放路径。移动，将当前绘图点移动到指定坐标。LineTo，绘制从前一点到指定坐标点的线段。SetLineDash，用于设置虚线的方法。该参数是一个数组，指示绘制的实线的长度和实线之间的间隙长度。尝试通过设置不同的lineCap值来绘制相同的线段。
ctx.lineWidth=10ctx.textAlign= centerlet colors=[红色，绿色，蓝色]；let lineCaps=[butt ， round ， square ]；for (let [index，LC]of line caps . entries()){ CTX . stroke style=colors[index]；//设置线段的颜色ctx.lineCap=lc//设置line cap CTX . begin path()；//清除当前路径ctx.moveTo(10，20 20 * index)；ctx.lineTo(50，20 20 * index)；CTX . stroke()；ctx.fillText(lc，80，25 20 * index)；}
从上图的结果可以看出，当lineCap设置为圆形和方形时，除了圆形是圆弧样式，方形是矩形样式之外，还会在原线段两端增加一定长度的端点。应该注意，在画布绘制上下文中，一次只能有一个当前路径。为了绘制不同的线段，必须在每次绘制之前调用beginPath()来清除当前路径并开始新的路径。
让我们尝试在具有不同lineJoin值的两条线段的焦点处绘制样式。
ctx.lineWidth=20ctx.textAlign= centerctx.lineCap= buttlet colors=[红色，绿色，蓝色]；let lineJoins=[bevel ， round ， miter ]；for (let [index，LJ]of line joins . entries()){ CTX . stroke style=colors[index]；//设置线段的颜色ctx.lineJoin=lj//设置line join CTX . begin path()；//清除当前路径ctx.moveTo(10 80 * index，20)；ctx.lineTo(50 80 * index，20)；ctx.lineTo(50 80 * index，60)；CTX . stroke()；ctx.fillText(lj，40 80 * index，80)；}
正如你所看到的，三个lineJoin在处理两个线段的焦点时是不同的。其中，在设置lineJoin=miter 时，可以通过设置miterLimit属性来设置对角线长度与线宽一半的最大比值。当超过这个比例时，lineJoin将采用斜角模式。
画布不仅可以画实线，还可以画虚线。通过设置lineDashOffset属性并调用setLineDash()来绘制虚线。
ctx.lineWidth=10ctx.textAlign= centerctx.setLineDash([8，8])；//表示实线部分8个像素，间隙部分8个像素。Letcolors=[red ， green ， blue ]；设lineDashOffsets=[1，2，4]；for (let [index，l offset]of linedash offsets . entries()){ CTX . stroke style=colors[index]；//线段颜色ctx.lineDashOffset=ldOffset//设置偏移量CTX . begin path()；ctx.moveTo(10，20 20 * index)；ctx.lineTo(100，20 20 * index)；CTX . stroke()；CTX . fill text(` linedashoffset:$ { ldOffset } `，160，25 20 * index)；}
从图中可以看出，lineDashOffset是开始绘制虚线的设置偏移量。SetLineDash()方法接受数组参数。如果数组的数量是奇数，默认情况下，它会复制当前数组元素，使其为偶数。从第0个元素开始，表示实线的长度，第1个元素表示间隙的长度，第2个元素表示实线的长度，第3个元素表示间隙的长度。如果它到达数组中的最后一个元素，它将再次从头开始，以此类推。
ctx.lineWidth=10ctx.textAlign= centerlet colors=[红色，绿色，蓝色，灰色]；设line dashs=[[20，20]，[40，40]，[20，40]，[20，40，20]]；for (let [index，LD]of line dashs . entries()){ CTX . stroke style=colors[index]；//设置颜色CTX . setline dash(LD)；//设置line dash CTX . begin path()；ctx.moveTo(10，20 20 * index)；ctx.lineTo(171，20 20 * index)；CTX . stroke()；CTX . fill text(` line dashs:[$ { LD }]`，240，25 20 * index)；}
设lineDashOffset=0；//initial linedashoffsettxt . stroke style= green ；function animate(){ if(linedash offset 25){ linedash offset=0；} ctx.clearRect(0，0，宽度，高度)；//清空当前画布CTX。linedash offset=-linedash offset；//Set linedashoffsetctx . setline dash([4，4])；//设置实线长度和间隙长度ctx.rect(20，20，100，100)；//绘制矩形CTX . stroke()；//用lineDashOffset=1画出画布的当前路径；//lineDashOffset偏移量加上1个窗口。RequestAnimation帧(animate)；//以浏览器帧率重复执行animate函数} animate()；
小结
画线段的时候，要理解画布当前路径的概念。在某一时刻，画布中只有一条当前路径。当开始一个新路径时，必须调用beginPath()。您可以通过设置线宽、线帽和线连接来设置线段的绘制样式。追踪线段时，可以通过strokeStyle设置线段的颜色。
在canvas中，不仅可以画实线，还可以通过lineDashOffset和setLineDash()画虚线。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。