HTML5 Canvas javascript污迹笔刷工具

问题描述

我需要知道如何制作可以上色的刷子.

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:

1. 使用图像数据计算用户到目前为止已移动的平均颜色.

1. 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污迹笔刷工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！