如何使用动态图案和颜色设置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>