学习笔记——使用canvas给图形填色

看到canvas的章节，想到可以用它来画个图。然后选了幅由简单线条组成的卡通火箭图，准备动手画。画的过程中遇到了些问题，这里整理一下。下面是找来的图：

没上色前，还感觉不出什么问题。就是使用lineTo画直线，quadraticCurveTo画曲线。附个没上色的图：

到上色了，就遇到问题了：一个颜色怎么覆盖到另外一个颜色上面去？

其实也没有很复杂，主要关键点在闭合路径。我刚开始画的无颜色的图，是按自己平时画画的顺序画的，从火箭头部开始画起，左一条线，右一条线，再补一个下面的线，一个缺了一截的类似橄榄球的形状的火箭外壳出来了。这个顺序就错了，填充颜色就不能很好的完全填充了里面的全部。应该要类似一笔画一样，连续地把整个外壳画出来，再填色，得到这样的图：

到其它部分了，canvas里面，一个路径填色后，如果另外一个路径也需要填色的话，在这与PS不同，不是填充，而是覆盖。后绘画的路径会覆盖到前面的路径上，路径填充的颜色也同样可以。例如火箭尾部中间的那个尾翼，就应该把这路径放在最后，以便能覆盖在前面画好的部分上。里面重要的要注意的点，还是上面说过的“闭合路径”。不过一般以画完上一条线的终点作为起点来画下一条线，不使用closePath()也可以，好像并不会出现什么问题，反正都是要被覆盖到下面的。看别人博客说的一句话，放出来记一下：

" 如果我们不希望路径闭合，比如三角形我们只画两条边，不希望第三条边出现，那么就不要写closePath()，而样式也不会发生混乱。需要注意：closePath()这个函数对fill()是不起作用的，即使没有closePath(),fill()也同样会找到到首尾相接的路径进行填充。"

我前面在说“闭合路径”，可是后面又说不需要闭合也可以，是不是有点矛盾？需不需要在绘画的时候闭合路径是要区分不同的情况的。

第一种情况，不需要闭合也可以：

例如火箭尾部两边的尾翼，正常来说要画一边的尾翼，则需要画两笔就可以了，因为前面已经把外轮廓给画好了，相当于已经是一个封闭的图形了。这里说的不需要闭合，就是因为上面引用别人博客上面说的：即使没有闭合路径，fill()也会自动找到首尾相接的路径进行填充。前提是画路径的时候顺序没有错，看下面左边那张图，是以这个顺序画的，使用fill()的时候会自动帮你补全，只是没有那条路径线，但不阻碍fill()填充的时候是直线填充回路径原点，如下面右边那张图。再加上火箭的外形是往外凸的，更加能遮掩我们这补全的部分，没露馅，所以这时候闭不闭合路径都无所谓，反正能遮住。

第二种情况，需要闭合路径：

这个情况就看火箭头部红色类似三角形的部分，这里可没地方给我们遮掩，这部分内容得放在最上面（就是在语句的最后面）。如果是在图片编辑软件里面，是不是直接画两条线分隔开就好啦？然后填充上面红色，中间深蓝色。可是canvas里面不行，没有一个路径可以完全的闭合。拿开其它绘制好的部分，其实就剩下这两条线。

这两条线还没有相交的点，如果真的直接这样填充的话，估计只能填充出这样的效果：

这时候就需要另外补充一个完整的闭合路径，盖到上面去。相当于给笔套上笔盖？在适当的位置，再给加上两个类似下面这样的火箭头，稍大一点的深蓝色，稍短一点的红色，覆盖到原来的银灰色机身头部上。

当然，中间卡着的那个深蓝色部分，你也可以选择不画一个完整的类似上图的这样，画一个弯曲的四边形？这样的东西。不过我觉得画一个稍大点，再画个稍小点的套上去比较好画，好控制。当然啦，随自己高兴。

不过我还真觉得在这幅图上加不加closePath()都没什么影响。毕竟我说的闭合路径不是使用closePath()方法来闭合，而是手动闭合呀。

最后放下画好的图：

学习笔记——使用canvas给图形填色相关推荐

AI的不封闭图形填色
最近在画模型图,记录一下如何给不封闭图形填色示例思路如下:把不封闭图形做成一个封闭区域,在两个端点之间绘制线条粗细为0pt的线条,之后在封闭区域填色即可. 直线段工具 --> 绘制直线方便 ...
html5做涂色游戏,h5 canvas益智类填色画游戏代码
特效描述:h5 canvas益智类填色画游戏代码.h5益智类小游戏,基于canvas填色画图游戏下载.游戏介绍:通过选中色块,来给模型填充颜色.支持多种模型选择填色效果. 代码结构 1. 引入JS ...
基于canvas的任意图形填色——油漆桶效果
仓库地址:https://github.com/applelee/fast-fill 上个截图一个填色小demo,支持多实例 https://github.com/applelee/fast-fil ...
HTML 5 学习笔记之 canvas 标签
Canvas是HTML5中的画布API,用来帮助大家在浏览器上快速的绘制图形图像. Canvas是什么? HTML5 <canvas> 元素可以用来通过使用脚本来绘制图形图像.<ca ...
HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形
1.线性渐变 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
h5学习笔记之canvas绘图（1）
一.canvas标签的说明在设置cancas大小的时候,必须在标签内写,如果在css内写会发生变化默认宽度300px,默认高度 150px 背景颜色红色的一个长方形 <canvas wid ...
cocos2d-x初探学习笔记（12）--图形绘制
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man Cocos2d-x封装了一些opengl的方法 ...
java repaint 重画图形,学习笔记：WINDOWS的图形重绘基础
OnPaint()与OnDraw()的区别: OnPaint是WM_PAINT的消息响应函数,在MFC的基类里OnPaint函数调用了OnDraw()函数. OnPaint函数另外还调用了OnPrep ...
Web前端学习笔记（十五）---四色花瓣
效果展示 Demo代码 HTML CSS 学习于:YouTube 代码获取如下

学习笔记——使用canvas给图形填色

学习笔记——使用canvas给图形填色相关推荐

最新文章

热门文章