HTML5帆布填充兩種顏色

我有一個要求填充兩種顏色的形狀 - 像棋盤。HTML5帆布填充兩種顏色

我已經看到一些漸變效果與CSS但沒有看到任何這樣的例子。

這將甚至可能在Html5畫布？

來源

2012-01-26 sianabanana

沒有什麼是真的，我不知道從哪裏開始或者是否有可能。 – sianabanana

「這個問題沒有顯示任何研究工作。」 – ellisbben

對不起，我一直在使用谷歌搜索，但它並不容易找到。 – sianabanana

你肯定能。事實上，您可以使用任何可重複的東西填充任意形狀，即使您在Canvas中製作的形狀也是如此！

這裏的得到填充有畫布上中定義的「豌豆莢」的任意形狀的一個示例：http://jsfiddle.net/NdUcv/

這用一個簡單的棋盤圖案：http://jsfiddle.net/NdUcv/2/

即第二個使一個形狀補這個樣子：

enter image description here

創建通過使畫布，然後繪製圖案無論我要重複它：

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;

並繪製填充該模式東西。

當然，它不一定是一個畫布路徑，您可以使用棋盤圖像（或任何類型的圖像），並使用畫布圖案填充一個形狀。

來源

2012-01-26 16:33:55

+1，我看過的createPattern的第一個用法。 – ellisbben

ooo，看起來像我想要的。謝謝一堆。現在就去檢查一下。 – sianabanana

我做了一個簡單的例子

<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'; 
} 

}

來源

2012-01-26 14:22:39

HTML5帆布填充兩種顏色

回答

相關問題