HTML5 Canvas 填充两种颜色答案

【问题标题】：HTML5 Canvas Fill with two coloursHTML5 Canvas 填充两种颜色
【发布时间】：2012-01-27 04:09:30
【问题描述】：

我需要用两种颜色填充一个形状——比如棋盘。

我见过一些css的渐变效果，但还没有见过这样的例子。

这在 Html5 Canvas 中是否可行？

【问题讨论】：

没什么，我不知道从哪里开始，也不知道它是否可能。
“这个问题没有显示任何研究成果。”
对不起，我一直在谷歌上搜索，但不是那么容易找到。

标签： css html canvas

【解决方案1】：

你当然可以。事实上，您可以用任何可重复的东西填充任意形状，即使是您在 Canvas 本身中制作的形状！

这是一个用画布上定义的“豌豆荚”填充任意形状的示例：http://jsfiddle.net/NdUcv/

这是一个简单的棋盘格图案：http://jsfiddle.net/NdUcv/2/

第二个使形状填充看起来像这样：

我通过制作一个画布然后在上面绘制我想要重复的任何内容来创建该模式：

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);

然后在我的普通画布上我可以这样做：

var pattern = ctx.createPattern(pattern, "repeat");
ctx.fillStyle = pattern;

并用该图案填充任何东西。

当然它不一定是画布路径，您可以使用棋盘图像（或任何类型的图像）并使用画布图案填充形状。

【讨论】：

ooo 看起来像我想要的。谢谢一堆。现在就去看看。

【解决方案2】：

我做了一个简单的例子

<html>
<head>
<hea>
<body onload='xx()'>
<canvas id='mycanvas' width='256' height='256'>ops</canvas>
</body>
<script type='text/javascript'>
function xx(){
var canvas= document.getElementById('mycanvas');
    ctx= canvas.getContext('2d');

for(var i=0;i<8;i++){
    for(var j=0;j<8;j++){

if (ctx.fillStyle == '#000000')
ctx.fillStyle = 'blue';
else    ctx.fillStyle = '#000000';


ctx.fillRect(32*j, 32*i, 32,32);
    }
if (ctx.fillStyle == '#000000')
ctx.fillStyle = 'blue';
else    ctx.fillStyle = '#000000';
}

}

【讨论】：