HTML5 Canvas javascript污迹笔刷工具 [英] HTML5 Canvas javascript smudge brush tool
问题描述
我需要知道如何制作可以上色的刷子.
I need idea how i can make brush who can color smudge.
图片示例:用基本笔刷在右侧进行绘画，在左侧使用两种不同的颜色进行绘画，但另外使用涂抹工具，结果应类似于左侧
Example in picture: right side painting with basic brush with two different colors in left also painting but additional use smudge tool, the result should be something like left side
我需要一些建议，我该怎么做
I need advice how i can try to do it
推荐答案
您将需要操纵像素以达到涂抹效果.
您可以使用context.getImageData从画布获取像素信息.
You can get the pixel information from the canvas using context.getImageData.
当用户将虚构画笔移动到现有像素上时，您可以通过以下方式模仿真实画笔的污迹:
As the user moves an imaginary brush over existing pixels, you can mimic smudging with a real brush by:
-
使用图像数据计算用户到目前为止已移动的平均颜色.
Use the image data to calculate the average color the user has moved over so far.
将fillStyle设置为该平均颜色.
将fillStyle的alpha设置为半透明值(可能为25％).
Set the alpha of the fillStyle to a semi-transparent value (maybe 25%).
当用户拖动画笔时，使用半透明的颜色平均填充在现有像素上绘制一系列重叠的圆.
As the user drags the brush, draw a series of overlapping circles over the existing pixels using the semi-transparent, color-averaged fill.
如果特定的客户端设备具有更大的处理能力，则可以通过阴影增强效果.
If a particular client device has more processing power, you might enhance the effect with shadowing.
这篇关于HTML5 Canvas javascript污迹笔刷工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
