canvas相关API简介及思考

关于canvascanvas对于大部分前端开发人员来说，可以用一个词来形容--既熟悉又陌生。为什么这样说，因为大部分前端开发人员在写业务代码的时候用到canvas的概率很小，就算用到了，也只是类似drawImage这个API,并且，对drawImage这个API的了解也并不深刻，只知道它可以将图片绘制到画布上，其他的功能大部分人应该都不知道。

其实drawImage这个API除了能将图片绘制到画布上，也可以对绘制到画布上的图片进行缩放。代码如下:

代码语言：javascript代码运行次数：0运行复制 ctx.drawImage(img, x, y, img.naturalWidth, img.naturalHeight, 0, 0, canvasHeight * (scaleRate / 100), canvasWidth * (scaleRate / 100))

最后两个参数是对绘制到画布上的图片设置缩放后的宽高。详细的解释可以查MDN。

canvas具体有哪些功能上面的drawImage只是个引子。如果你对canvas研究的比较深刻，那么你会发现，和浏览器其他的API相比，如果想要开发一个产品，其他的API可能需要很多组合在一起才能开发出来一套产品。canvas不同，canvas的API本身就是一套成熟的产品。

我们具体来看它都具有哪些功能:

绘制矩形fillRect(x, y, width, height)绘制一个填充的矩形strokeRect(x, y, width, height)绘制一个矩形的边框clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。绘制路径首先，你需要创建路径起始点。然后你使用画图命令去画出路径。之后你把路径封闭。一旦路径生成，你就能通过描边或填充路径区域来渲染图形。beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。closePath()闭合路径之后图形绘制命令又重新指向到上下文中。stroke()通过线条来绘制图形轮廓。fill()通过填充路径的内容区域生成实心的图形。移动笔触和绘制直线moveTo() 移动笔尖的位置lineTo() 绘制直线绘制圆弧arc(x,y,radius,startAngle,endAngle,anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

二次贝塞尔曲线及三次贝塞尔曲线如果你不了解贝塞尔曲线，那么如果你使用过photeshop，photoshop的钢笔工具绘制的实际上就是贝塞尔曲线，有两个定点和一个控制点，或者多个控制点。

如果photoshop的钢笔工具也不知道，那么就找时间科普一下吧

quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

颜色和样式fillStyle可以给绘制的内容填充颜色，比如:代码语言：javascript代码运行次数：0运行复制const draw =() => {

let ctx = document.getElementById('canvas').getContext('2d');

for(let i=0;i<6;i++){

for(let j=0;j<6;j++){

ctx.fillStyle = `rgb(${Math.floor(255-42.5*i)},${Math.floor(255-42.5*j)},0)`

ctx.fillRect(j*25,i*25,25,25)

}

}

}

这段代码会绘制一个类似取色板的东西。

线型设置线条的各种样式

lineWidth = valuelineCap = butt|round|square 线条末端样式lineJoin = round|bevel|miter 线条间结合处样式miterLimit = value 两条线相交时交接处最大长度getLineDash 当前虚线样式setLineDash 设置当前虚线样式图案样式createPattern() 绘制图片的各种纹理，类似photoshop中的填充功能，我是这么理解的。阴影设置阴影样式

shadowOffsetX = floatshadowOffsetY = floatshadowBlur = floatshadowColor = color绘制文本fillText(text,x,y,[maxwidth]) 填充(实体的文字)strokeText(text,x,y,[maxwidth]) 描边（镂空的文字）文本样式font = valuetextAlign = start|end|left|right|centertextBaseLine = ltr|rtl|inherit测量文本宽度measureText(value) 获取更多文本细节使用图像功能:动态图像合成，或作为图形的背景。使用drawImage()方法将图片绘制到画布上。

scale(x,y) 缩放：增减图像在canvas中的像素数目slice(x,y) 切片canvas状态保存和恢复save() 保存画布所有状态restore() 恢复画布状态translate(x,y) 移动画布rotating(angle) 旋转scale(x,y) 缩放：增减图像在canvas中的像素数目transform(a,b,c,d,e,f) 对变形矩阵直接修改组合组合是将两个图像或选区组合在一起

globalCompositeOperation 可以修改绘制顺序clip 可以隐藏不需要的部分基本动画流程清空canvas保存canvas状态绘制图型恢复canvas状态总结以上只是关于canvas相关的API的一些梳理，当然还有很多没有提到的api，利用这些API可以实现很多关于图像处理的内容，比如：蚂蚁线，图像滤镜，图像渐变...等等

后面我将会结合一个具体的项目来梳理相关的知识点，并将开发期间遇到的问题一一分享出来...

上图是已经在开发中的内容，canvas中的图片已经实现了缩放，接下来可能是移动，新建图层...