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>