Css HTML5画布填充两种颜色
我有一个要求，用两种颜色填充一个形状，就像一个棋盘 我已经看到了一些css的渐变效果，但还没有看到类似的例子 这在Html5画布上可能吗？我做了一个简单的例子Css HTML5画布填充两种颜色,css,html,canvas,Css,Html,Canvas,我有一个要求，用两种颜色填充一个形状，就像一个棋盘 我已经看到了一些css的渐变效果，但还没有看到类似的例子 这在Html5画布上可能吗？我做了一个简单的例子 <html> <head> <hea> <body onload='xx()'> <canvas id='mycanvas' width='256' height='256'>ops</canvas> </body> <script type='te
<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';
}
}
老年退休金
函数xx（）{
var canvas=document.getElementById（'mycanvas'）；
ctx=canvas.getContext（'2d'）；
对于（var i=0；i你当然可以。事实上，你可以用任何可重复的东西填充任何任意形状，甚至用你在画布上自己制作的形状
下面是一个任意形状被画布上定义的“豌豆荚”填充的示例：
这里是一个简单的棋盘模式：
第二个使形状填充看起来像这样：
我通过制作画布，然后在画布上绘制任何我想重复的图案来创建该图案：
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;
然后用这个图案画任何东西
当然，它不必是画布路径，您可以使用棋盘格图像（或任何类型的图像）并使用画布图案填充形状。实际上没有什么，我不确定从何处开始，或者是否可能。“这个问题没有显示任何研究成果。”对不起，我一直在谷歌上搜索，但它不是那么容易找到。哦，这看起来像我想要的。非常感谢。我现在就去看看。