javascript - rectangulo - ¿Cómo rellenar el arco del círculo de cannvas con una imagen diferente?

dibujar un triangulo en javascript

Question

Estoy creando un círculo de la rueda de la fortuna usando el lienzo html5. Funciona bien con el color de estilo de relleno. Quiero dos (2) imágenes diferentes en un patrón de estilo de relleno de sectores aleatorios. Cómo lograr eso.

aquí está mi 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);

Aquí está mi html

<div id="wheel">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<button id="spin">Stop!</button>
<button id="play">play!</button>

Por favor, ayúdame. Violín de trabajo está aquí

Answer 1

Tratar

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

Answer 2

Podría usar un lienzo fuera de pantalla, donde lo haría

• dibuja la primera imagen, en la rotación actual,
• aplicar composición sobre él con la mitad de las rebanadas (1/2)
• dibuje este lienzo fuera de pantalla en el principal,
• repita las mismas operaciones con la segunda imagen

Aquí hay una fea prueba de base de concepto en tu código, es realmente feo, así que reescríbelo por favor.

// 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>