有谁有使用HTML5Canvas实现蜡笔或者粉笔效果画笔的经验?

html-css013

有谁有使用HTML5Canvas实现蜡笔或者粉笔效果画笔的经验?,第1张

canvas实现材质画笔,的确就是用遮罩来做比较合适了。

之前看到过google官方有个截图后用canvas画画的小demo,是将画出来笔迹生成dom节点,再加以css3变成材质,个人觉得这种方式就是“删除”“移动”等操作比较简便(谁叫canvas事件绑定这么难控制…),但有很大的缺陷,就是dom元素过多层叠,影响页面效率。

再说canvas遮罩方式,觉得是可以实现不同画笔绘制的。可以设置不同的layer,比如layer_a是玻璃材质的图片,layer_b是木材质的图片。layer_a在layer_b上面,最上面再覆盖一层白纸layer_c。用玻璃画笔画时,局部清除layer_c痕迹,露出layer_a;用木画笔时,局部清除layer_c与layer_a,露出layer_b。

1:ps打开,新建文件,选择钢笔工具,随便画出一条路径

2:选择画笔工具,设置画笔,f5调出画笔窗口,形状动态中最小路径设置下,数值越大两边越粗。

3:选择钢笔工具,右击描边,勾选模拟压力

4:好了,线条出来了。