canvas学习之给绘制出来的图形上色

复习

截止目前，canvas的各种绘制方法我们都已经学习过了，可以绘制出线条，三角形，长方形，圆，圆弧，圆滑的曲线等，在此基础上，拥有足够的创造力，我们可以使用js在canvas画板上画出各种形象来。下面我们对已经学习过的内容进行总复习，然后开启新的篇章，去认识丰富多彩的canvas世界。

• canvas是一个h5新添加的dom，在使用时要做好回退策略；
• canvas有一个getContext('2d')接口来获取绘画上下文，所有的canvas绘制方法都基于此。
• 在开始绘制前，需要调用beginPath()来表示要开始绘画了。
• 一笔绘制结束后，如果不希望和下一笔相连，需要调用endPath()方法来结束，同时endPath()方法还有闭合首位两点的功能。
• 绘制结束后，只有调用stroke()或者fill()方法，图形才能显示出来，其中stroke()方法是使得线条有颜色，fill()方法将线条包裹的区域填充起来。
• 开始绘画后使用moveTo(x,y)方法来落笔，做为绘画开始的起点。
• 使用lineTo(x,y)方法将笔触移动到下一个点，与前一个点之间绘制出一条直线,前一个点可以时moveTo(x,y)的点，也可以时lineTo(x,y)的点。
• 利用lineTo(x,y)方法，我们可以绘制出各种图形来，只要我们有足够的想象力和相应的数学方法，最简单的就是三角形，四边形等一些常见的图形了。
• 为了减少操作，canvas为了们提供了两个绘制圆和圆弧的方法。第一个是arc(x,y,radius, startAngle,endAngle, anticlockwise),这里面的参数一次是x,y是圆的圆心，radius是圆的半径，startAngle和endAngle是圆弧的起始弧度和结束弧度，其中一弧度=Math.PI / 180 度。anticlockwise表示是否按照逆时针来绘制。需要注意的是，开始的弧度数（0）并不再我们正常理解的0点，而是在3点的位置。另外一个画圆弧的方法是通过提供两个点和一个半径来完成，方法是arcTo(x1,y1,x2,y2,radius),其中x1,y1是一个点，x2，y2时另外一个点，radius是半径，函数内部会依据所给的两点和半径找到圆心并绘制出图形来。
• 同样，绘制矩形canvas也为我们提供了两个接口，分别是fillRect(x,y,width,height),strokeRect(x,y,width,height)，这两个方法中，x，y表示矩形的左上角点的位置，width表示矩形的宽度，height表示矩形的高度，fillRect会绘制出一个有填充了的矩形，strokeRect绘制出来的矩形只有四条边。实际上，绘制矩形还有一个方法叫rect(x,y,width,height)，我们前面没有学习。它的四个参数和fillRect和strokeRect一样，我觉得相对比较多余，就没有详细学习。
• canvas提供了二阶贝塞尔曲线和三阶贝塞尔曲线来绘制圆滑曲线，这让我们免去了复杂的计算，可以直接调用接口。二阶贝塞尔曲线方法是quatraticCurveTo(x1,y1,x2,y2)，x1，y1和x2，y2两个点分别是曲线的控制点和终点，它们和moveTo(x,y)方法的点一起，构成了三个控制点，一起来绘制圆滑曲线。三阶贝塞尔曲线方法bezierCurveTo(x1,y1,x2,y2,x3,y3),三个点和moveTo（x,y）的一个点构成了四个点，一同来绘制圆滑曲线。
• 最后，我们学习了一个了解用的高阶对象Path2D,它可以记住路径，还可以使用svg路径，可以使用绘画上下问的全部接口，能够简化绘画操作。

以上，就是我们已经学习过的canvas内容。

学习，让给绘制出来的图形上色。

我们之前学的内容，如果来做一个比拟的话就是我们已经可以排除黑白照了，但是彩色的照片，还是没法弄出来。这一节，我们学习给图形上色。

在之前的学习中我们知道，要想让图片显示出来，我们会用到两个方法，一个是fill()，一个是stroke().

fill()方法会将整个闭合的图形给填充满，stroke()方法将线条绘制出来，如果是图形就会绘制出边框。我们将将它们称为上色。和现实生活中做一类比，会显得有点奇怪明明还没有颜色，怎么就去上色了呢？

其实是有的，只不过是默认颜色黑色。想换颜色，需要手动来。

canvas为我们提供了两个属性来替换颜色，帮我们绘制出缤纷多彩的世界。

• fillStyle = color。 用来设置fill()方法的颜色。color表示要填充的颜色字符串，可以是16进制颜色，纯字符串颜色，rgb色值，rgba色值，hsl色值，hsla色值等，只要是符合css3颜色值标准的都可以。我们在日常开发中经常遇到的用到的主要是16进制色值，rgb，rgba色值。

---

这样，彩色的矩形就被我们画出来了。需要注意这么几点：1.closePath()后新绘制的图形还是会继续使用之前close之前的颜色，不会变回默认，如果需要改变颜色，需要去手动改变。

• strokeStyle="color"，用来设置stroke()的颜色，规则和fillStyle一样。下面直接开始举例子

以上，我们就学会了给canvas上色。作业：自己画一个有颜色的三角形和圆。

原文链接