1
我想使用html5畫布動態地將顏色和圖案設置爲形狀。該模式是一個.png圖像。當我研究這個主題時,我發現你不能混合fillStyle = pattern和fillStyle = color畫布形狀將只能得到其中的一個。我想在背景中有一個顏色和動態的前進圖像模式。這可能嗎?如何使用動態圖案和顏色設置Html5 Canvas FillStyle
任何想法將不勝感激。
我想使用html5畫布動態地將顏色和圖案設置爲形狀。該模式是一個.png圖像。當我研究這個主題時,我發現你不能混合fillStyle = pattern和fillStyle = color畫布形狀將只能得到其中的一個。我想在背景中有一個顏色和動態的前進圖像模式。這可能嗎?如何使用動態圖案和顏色設置Html5 Canvas FillStyle
任何想法將不勝感激。
只是繪製兩次圓形路徑:
與固體石灰第一次填補
第二時間與圖案
實施例的代碼和一個演示:
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>