HTML5画布中的自定义线条描边

使用HTML5画布元素描画线条时，是否可以定义线条的笔触样式？基本上在Photoshop和其他类似的程序中，您可以为看起来像“手绘”的线条定义笔触样式。是否可以在HTML5画布中做这样的事情，或者我在这里拍摄月球？HTML5画布中的自定义线条描边

感谢

-Jesse

来源

2011-05-20 jomille

有可能获得更多的控制权，但不是默认的。请参阅ShadowCloud的文章，了解默认情况下可以执行的操作（很少）。

取决于你想要什么，它不应该太难。

如果通过“手绘”表示您需要抖动，则必须将每条绘制线/曲线分解为较小的部分，并为每个点添加一些噪点。

如果您需要画笔，您必须将每条绘制的线/曲线分解为较小的部分，并且每隔几个像素就调用一次drawImage以模拟Photoshop笔刷。

几乎所有的人都依靠把你的线条和曲线分解成更小的位，所以你应该把它看成是最重要的。

如果您决定实施这些，并且无法分解贝塞尔曲线并需要帮助，请告诉我，我会为您提供我的代码。

来源

2011-05-20 14:50:12

是的，我想这就是我不得不做的。对于一个简单的效果，工作量太少，所以我可能会寻找不同的选项。谢谢 – jomille 2011-05-26 19:09:20

有一个在HTML5画布没有标准的API来管理这样的事情。

您可以只设置颜色或笔画的宽度，例如：

context.strokeStyle = '#f00'; // red color 
context.lineWidth = 4; // 4px wide 

// Draw some rectangles. 
context.fillRect (0, 0, 100, 100); 
context.strokeRect(0, 0, 100, 100);

您可以尝试使用库（Processing.js或Fabric.js）

来源

2011-05-20 14:09:52 BFil

HTML5画布中的自定义线条描边

回答

相关问题