html5画布形状填充 [英] html5 canvas shapes fill

问题描述

我在画布上有一个基本的绘画应用程序，我想制作一个绘图边框，然后创建一个模板。换句话说，我想制作一个形状，然后我希望用户只能在其内部绘制，即使他试图在外面绘制。

I have a basic paint application on a canvas, and I want to make a drawing-border and by that create a stencil. In other words, I want to make a shape, and then I want the user to be able to draw only inside it, even when he tries to draw outside.

你知道我该怎么办？
谢谢

Do you have any idea how can i do it? thanks

推荐答案

这可以通过制作剪辑区域来实现。基本的想法是画布上有一条路径，所有绘图都被约束。

This can be achieved by making a clipping region. The basic idea is that there is a path on the canvas that all drawing is constrained to.

制作形状，而不是调用 stroke（ ）或 fill（），致电 clip（）

Make the shape, and instead of calling stroke() or fill(), call clip()

如果你不太了解剪裁区域是如何工作的，那么有一些示例。

If you don't quite get how clipping regions work, there are a few examples around.

这篇关于html5画布形状填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！