这是学习复习canvas系列笔记的第一篇。完整笔记参见：Canvas核心技术学习canvas首先要知道如何绘制线段，然后可以通过很多简单的线段来实现比较复杂的图形，比如常见的图表、直方图、折线图等，都是逐段实现的。基础知识canvas的基础知识不多，主要掌握如何绘制线段、图形、图片、文字等。可以在浏览器中绘制canvas，也可以借助node-canvas在node服务器上绘制简单的图片。本文仅记录在浏览器中绘制。至于如何在节点端绘制，大家可以自行查阅相关资料。要在浏览器中绘制，首先要在html中定义canvas元素。默认宽高为300*150，可以通过宽高设置。注意canvas元素样式的宽高和canvas绘图画布的宽高不是一回事，这个后面会讲到。当前浏览器不支持canvas，请升级浏览器
在绘制之前，我们需要获取当前canvas的二维绘图上下文上下文，以及后续总是通过操作上下文来绘制。letcanvas=document.querySelector('#canvas');if(!canvas){thrownewError('cannotfindcanvaselement');}//注意2d。参数必须小写；//通过给webgl设置参数，可以获取3D绘图上下文letctx=canvas.getContext('2d');注意：在后续的例子中，上面的代码片段会被忽略，直接使用ctx变量来表示画布的二维绘图上下文。我们来看看canvas2d绘图中的坐标系。当前canvas元素的左上角为坐标原点(0,0)，水平向右为X轴正向，垂直向下为Y轴正向，如图下图。您可以通过平移、旋转和缩放来操纵坐标系，以实现一些动画。这部分会在动画知识部分详细讲解。绘制简单线段时，一般会先设置线段的样式，比如颜色、线宽、线端点样式等。我们通过设置strokeStyle来设置ctx的全局绘制样式，可以是rgba，也可以是合法的十六进制一个颜色值，或者一个渐变对象等。下面的代码简单的画了一条从(10,10)到(50,60)的红色线段，宽度为10。ctx.strokeStyle='red';ctx.lineWidth=10;ctx.moveTo(10,10);ctx.lineTo(50,60);ctx.stroke();先看绘制线段相关的方法和属性，相关属性：lineCap，这个值告诉浏览器如何绘制线段的端点，可选值是以下三个之一：butt,round,square。默认是屁股。lineWidth，这个值决定了线段的像素宽度。必须是非负数，非无限，默认为1.0。lineJoin决定了两条线段相交时如何绘制焦点。只有当两条线段的方向不同时才会生效。可能的值：bevel、round、miter。默认为斜接。miterLimit，告诉浏览器如何以miter形式绘制线段的焦点，仅当lineJoin='miter'时有效，默认为10.0。lineDashOffset，设置虚线偏移量，默认为0.0。相关方法：beginPath，清除当前路径中的所有子路径，重新设置当前路径。一般在绘制闭合图形时应先调用。closePath，显示闭合路径。此方法用于闭合圆弧路径以及由曲线或线段创建的开放路径。moveTo，将当前绘图点移动到指定坐标。lineTo，从上一个点到指定坐标点绘制一条线段。setLineDash，用于设置虚线的方法，参数是一个数组，表示绘制实线的长度和实线之间的空隙长度。尝试设置不同的lineCap值绘制同一条线段ctx.lineWidth=10;ctx.textAlign='居中';让颜色=['红色','绿色','蓝色'];让lineCaps=['butt','round','square'];for(let[index,lc]oflineCaps.entries()){ctx.strokeStyle=colors[index];//设置线段的颜色ctx.lineCap=lc;//设置线头ctx.beginPath();//清除当前路径ctx.moveTo(10,20+20*index);ctx.lineTo(50,20+20*索引);ctx.stroke();ctx.fillText(lc,80,25+20*index);}从上图的结果可以看出，当lineCap设置为圆形和方形时，会在两端添加一定长度的端点原来的线段，不过round是圆弧样式，square是Rectangle样式。需要注意的一件事是在画布绘图上下文中一次只能有一个当前路径。为了绘制不同的线段，必须在每次绘制之前调用beginPath()来清除当前路径并开始新的路径。我们来尝试使用不同的lineJoin值绘制两条线段焦点处的样式ctx.lineWidth=20;ctx.textAlign='居中';ctx.lineCap='屁股';letcolors=['red','green','blue'];letlineJoins=['bevel','round','miter'];for(let[index,lj]oflineJoins.entries()){ctx.strokeStyle=颜色[索引];//设置线条颜色ctx.lineJoin=lj;//设置lineJoinctx.beginPath();//清除当前路径ctx.moveTo(10+80*index,20);ctx.lineTo(50+80*索引,20);ctx.lineTo(50+80*索引,60);ctx.stroke();ctx.fillText(lj,40+80*index,80);}可以看出三种lineJoin处理的重点是两条线段的差异。其中，在设置lineJoin="miter"时，通过设置miterLimit属性，可以设置斜接线的长度与线宽的二分之一的最大比例。当超过这个比例时，lineJoin将采用bevel方法。Canvas不仅可以画实线，还可以画虚线。要绘制虚线，请设置lineDashOffset属性并调用setLineDash()。ctx.lineWidth=10;ctx.textAlign='center';ctx.setLineDash([8,8]);//表示实线8个像素，空隙8个像素letcolors=['red','green','blue'];letlineDashOffsets=[1,2,4];for(let[index,ldOffset]oflineDashOffsets.entries()){ctx.strokeStyle=colors[index];//线条颜色ctx.lineDashOffset=ldOffset;//设置偏移量ctx.beginPath();ctx.moveTo(10,20+20*索引);ctx.lineTo(100,20+20*索引);ctx.stroke();CTX。fillText(`lineDashOffset:${ldOffset}`,160,25+20*index);从图中我们可以看出，lineDashOffset是设置的开始绘制虚线的偏移量。setLineDash()方法接受一个数组参数。如果数组的编号是奇数，则默认复制当前数组元素，使其成为偶数。从第0个元素开始，表示实线的长度，第一个元素，间隙的长度，第二个元素，实线的长度，第三个元素，间隙的长度，如果达到数组的最后一个元素，从头开始，依此类推。ctx.lineWidth=10;ctx.textAlign='center';letcolors=['red','green','blue','gray'];letlineDashes=[[20,20],[40,40],[20,40],[20,40,20]];for(let[index,ld]oflineDashes.entries()){ctx.strokeStyle=colors[index];//设置颜色ctx.setLineDash(ld);//设置lineDashctx.beginPath();ctx.moveTo(10,20+20*索引);ctx.lineTo(171,20+20*索引);ctx.stroke();ctx.fillText(`lineDashes:[${ld}]`,240,25+20*index);}蚂蚁线可以通过动态设置lineDashOffset来实现，比如选中选区边缘的蚂蚁线在聚苯乙烯。让lineDashOffset=0;//初始lineDashOffsettx.strokeStyle='green';functionanimate(){if(lineDashOffset>25){lineDashOffset=0;}ctx.clearRect(0,0,宽度,高度);//清除当前画布ctx.lineDashOffset=-lineDashOffset;//设置lineDashOffsetctx.setLineDash([4,4]);//设置实线长度和间隙长度ctx.rect(20,20,100,100);//画一个矩形ctx.stroke();//描画画布的当前路径lineDashOffset+=1;//lineDashOffset偏移量加1window.requestAnimationFrame(animate);//使用浏览器帧率重复执行animate函数}animate();小结在画线段的时候，一定要理解画布当前路径的概念。在某一时刻，画布中只有一个当前路径。开始新路径时，必须调用beginPath()。可以通过设置lineWidth、lineCap、lineJoin来设置线段的绘制样式。描边线段时，可以通过strokeStyle设置线段的颜色。Canvas不仅可以画实线，还可以通过lineDashOffset和setLineDash()画虚线。
