我有一个要求用两种颜色填充一个形状 - 就像一个棋盘。
我见过一些 css 的渐变效果,但没有见过这样的例子。
这在 Html5 Canvas 中是否可行?
最佳答案
你当然可以。事实上,您可以用任何可重复的东西填充任意形状,甚至可以使用您在 Canvas 本身制作的形状!
这是一个任意形状的示例,其中填充了在 Canvas 上定义的“豌 pod ”:http://jsfiddle.net/NdUcv/
这是一个简单的棋盘图案:http://jsfiddle.net/NdUcv/2/
第二个使形状填充看起来像这样:
我通过制作 Canvas 然后绘制我想在其上重复的任何内容来创建该图案:
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');
// Two green rects make a checkered square: two green, two transparent (white)
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fillRect(0,0,20,20);
pctx.fillRect(20,20,20,20);
然后在我的普通 Canvas 上我可以做:
var pattern = ctx.createPattern(pattern, "repeat");
ctx.fillStyle = pattern;
并用该图案绘制填充任何东西。
当然它不一定是 Canvas 路径,您可以使用棋盘图像(或任何类型的图像)并使用 Canvas 图案填充形状。
关于css - HTML5 Canvas 填充两种颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9019220/