我创建使用HTML5画布财富圈轮。 它的正常工作与填充样式颜色。 我想在随机切片两（2）不同的图像填充样式的图案。 如何我做到这一点。
这里是我的JS
function rand(min, max) {
return Math.random() * (max - min) + min;
}
var color = ['#fbc','#f88','#fbc','#f88','#fbc','#f88', "#fbc", "#f67"];
var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"];
var slices = color.length;
var sliceDeg = 360/slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width/2; // center
var isStopped = false;
var lock = false;
function deg2rad(deg) {
return deg * Math.PI/180;
}
function drawSlice(deg, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(center, center);
ctx.arc(center, center, width/2, deg2rad(deg), deg2rad(deg+sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
function drawText(deg, text) {
ctx.save();
ctx.translate(center, center);
ctx.rotate(deg2rad(deg));
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = 'bold 30px sans-serif';
ctx.fillText(text, 130, 10);
ctx.restore();
}
function drawImg() {
ctx.clearRect(0, 0, width, width);
for(var i=0; i<slices; i++){
drawSlice(deg, color[i]);
drawText(deg+sliceDeg/2, label[i]);
deg += sliceDeg;
}
}
document.getElementById("spin").addEventListener("mousedown", function(){
isStopped = true;
}, false);
drawImg();
document.getElementById("play").addEventListener("mousedown", function(){
(function anim() {
deg += speed;
deg %= 360;
// Increment speed
if(!isStopped && speed<3){
speed = speed+1 * 8;
}
// Decrement Speed
if(isStopped){
if(!lock){
lock = true;
slowDownRand = rand(0.994, 0.998);
}
speed = speed>0.2 ? speed*=slowDownRand : 0;
}
// Stopped!
if(lock && !speed){
var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
ai = (slices+ai)%slices; // Fix negative index
return alert("You got:\n"+ label[ai] ); // Get Array Item from end Degree
}
drawImg();
window.requestAnimationFrame( anim );
}());
}, false);
这里是我的html
<div id="wheel">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<button id="spin">Stop!</button>
<button id="play">play!</button>
请帮助我。 工作小提琴是这里
你可以使用一个屏幕外的画布，在那里你会
- 绘制所述第一图像，在当前旋转，
- 它适用于合成与片的一半（1/2）
- 得出这样的屏幕外的画布上的主要原因之一，
- 重复相同的操作与第二图像
这是概念的基础上你的代码丑陋的证明，这是十分可怕的，所以把它改写请。
// First, load our images var srcs = ["https://images.pexels.com/photos/172292/pexels-photo-172292.jpeg?w=500&h=500&auto=compress&cs=tinysrgb", "https://static.pexels.com/photos/218434/pexels-photo-218434.jpeg?w=500&h=200&auto=compress&cs=tinysrgb" ]; var loaded = 0; function onload() { if (++loaded >= srcs.length) drawImg(); } var imgs = srcs.map(s => Object.assign(new Image, { onload: onload, src: s })); function rand(min, max) { return Math.random() * (max - min) + min; } var color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"]; var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"]; var slices = color.length; var sliceDeg = 360 / slices; var deg = rand(0, 360); var speed = 0; var slowDownRand = 0; var ctx = canvas.getContext('2d'); var ctx1 = canvas.cloneNode().getContext('2d'); // create an offscreen context var width = canvas.width; // size var center = width / 2; // center var isStopped = false; var lock = false; function deg2rad(deg) { return deg * Math.PI / 180; } function drawSlice(deg, color) { ctx1.moveTo(center, center); ctx1.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg)); ctx1.lineTo(center, center); ctx1.closePath(); } function drawText(deg, text) { // this should probably be rewritten ctx1.save(); ctx1.translate(center, center); ctx1.rotate(deg2rad(deg)); ctx1.textAlign = "right"; ctx1.fillStyle = "#fff"; ctx1.font = 'bold 30px sans-serif'; ctx1.fillText(text, 130, 10); ctx1.restore(); } function drawOnHiddenCanvas(index) { // we rotate the whole context ctx1.translate(canvas.width / 2, canvas.height / 2); ctx1.rotate(deg2rad(deg)); ctx1.translate(-canvas.width / 2, -canvas.height / 2); // so even our image is rotated ctx1.drawImage(imgs[index], 0, 0); // new drawn pixels will act as an mask (previous drawn pixels will remain) ctx1.globalCompositeOperation = 'destination-atop'; ctx1.beginPath(); // draw one on 2 slices for (var i = index; i < slices; i += 2) { drawSlice((sliceDeg * i), color[i], ctx); } ctx1.fill(); // fill only after all your shapes are done ctx1.globalCompositeOperation = 'source-over'; for (var i = index; i < slices; i += 2) { drawText((sliceDeg * i) + sliceDeg / 2, label[i]); } // reset the normal matrix ctx1.setTransform(1, 0, 0, 1, 0, 0); // draw this state on the main canvas ctx.drawImage(ctx1.canvas, 0, 0); } function drawImg() { ctx.clearRect(0, 0, width, width); drawOnHiddenCanvas(0); drawOnHiddenCanvas(1); } document.getElementById("spin").addEventListener("mousedown", function() { isStopped = true; }, false); document.getElementById("play").addEventListener("mousedown", function() { (function anim() { deg += speed; deg %= 360; // Increment speed if (!isStopped && speed < 3) { speed = speed + 1 * 8; } // Decrement Speed if (isStopped) { if (!lock) { lock = true; slowDownRand = rand(0.994, 0.998); } speed = speed > 0.2 ? speed *= slowDownRand : 0; } // Stopped! if (lock && !speed) { var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index ai = (slices + ai) % slices; // Fix negative index return alert("You got:\n" + label[ai]); // Get Array Item from end Degree } drawImg(); window.requestAnimationFrame(anim); }()); }, false);
#wheel{ display:inline-block; position:relative; overflow:hidden; } #wheel:after{ content:""; background:red; border:2px solid white; position:absolute; top:-7px; left:50%; width:10px; height:10px; margin-left:-7px; transform: rotate(45deg) }
<div id="wheel"> <canvas id="canvas" width="300" height="300"></canvas> </div> <button id="spin">Stop!</button> <button id="play">play!</button>
尝试
var img=new Image();
img.onload=start;
img.src="http://www.flooringvillage.co.uk/ekmps/shops/flooringvillage/images/request-a-sample--547-p.jpg";
function start(){
var pattern=ctx.createPattern(img,'repeat');
ctx.beginPath();
ctx.arc(50,50,15,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=pattern;
ctx.fill();
ctx.stroke();
}
