我要求用两种颜色填充形状 - 就像棋盘一样。
我已经看到了一些css的渐变效果,但没有看到这样的例子。
这在Html5 Canvas中是否可行?
答案 0 :(得分:8)
你确定可以。事实上,你可以用任何可重复的东西填充任意形状,即使是你在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;
并用该模式绘制任何填充物。
当然它不必是画布路径,您可以使用棋盘图像(或任何类型的图像)并使用画布图案用它填充形状。
答案 1 :(得分:1)
我做了一个简单的例子
<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';
}
}