如何使用動態圖案和顏色設置Html5 Canvas FillStyle

Question

我想使用html5畫布動態地將顏色和圖案設置爲形狀。該模式是一個.png圖像。當我研究這個主題時，我發現你不能混合fillStyle = pattern和fillStyle = color畫布形狀將只能得到其中的一個。我想在背景中有一個顏色和動態的前進圖像模式。這可能嗎？

任何想法將不勝感激。

Answer 1

只是繪製兩次圓形路徑：

• 與固體石灰第一次填補

• 第二時間與圖案

實施例的代碼和一個演示：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 

 

 
var img = new Image(); 
 
img.onload = start; 
 
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/star.png"; 
 

 
function start() { 
 

 
    ctx.beginPath(); 
 
    ctx.arc(150, 150, 130, 0, Math.PI * 2); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = 'lime'; 
 
    ctx.fill(); 
 

 
    var pattern = ctx.createPattern(img, 'repeat'); 
 
    ctx.fillStyle = pattern; 
 
    ctx.fill(); 
 

 
}

body { 
 
    background-color: ivory; 
 
} 
 
canvas { 
 
    border: 1px solid red; 
 
}

<canvas id="canvas" width=300 height=300></canvas>