如何设置具有动态图案和颜色的Html5 Canvas FillStyle

Question

我想使用html5画布动态地将颜色和图案设置为形状。该模式是一个.png图像。当我研究这个主题时，我发现你不能混合fillStyle = pattern和fillStyle = color画布形状只会得到其中一个。我想在背景中有一种颜色和动态前进的图像模式。那可能吗？

任何想法都会被欣赏。

Answer 1

只需绘制两次圆形路径：

• 第一次使用实心石灰填充

• 第二次使用模式

示例代码和演示：

＆＃13;

＆＃13;

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();

}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;