canvas绘制不规则线条,类似画板的画笔,基于zrender

本文介绍绘制类似画板中画笔功能的线条
zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考

多数情况下绘制线条首先想到的是用Line绘制,当然1或2像素的细线没什么问题
当线条变宽就有意想不到的惊喜出现了,如下图:(使用Line实例绘制)
canvas绘制不规则线条,类似画板的画笔,基于zrender_第1张图片

看到上图有朋友会想是因为Line是直线,拐弯Line无法绘制圆角
那么为了使线条圆润可以使用Circle来绘制线条,当然这个想法很好,试一下
绘制的效果如下图:(使用Circle实例绘制)
canvas绘制不规则线条,类似画板的画笔,基于zrender_第2张图片

看到这两种方式好像发现点什么,Line绘制细线和笔直的线性效果不错,Circle绘制的线条拐角比较圆润
这样好像恰恰弥补了各自的不足

那么两者结合起来会怎样呢?
效果如下图:
canvas绘制不规则线条,类似画板的画笔,基于zrender_第3张图片

嗯嗯。。我觉得效果还不错
完整代码如下:(注释详细,有任何疑问请留言!)
调节线宽使用了element-ui组件,请知悉






如下图简易画板功能可绘制大部分漂亮的图形,可保存图片到本地
在这里插入图片描述
参考:https://gitlab.com/zhangcw66/draw_board
说明:画板功能并不严谨,可参考学习绘图,不建议实际使用

你可能感兴趣的:(canvas绘制不规则线条,类似画板的画笔,基于zrender)