library - javascript paint canvas




comment remplir arc de cercle cannvas avec une image différente? (2)

Essayer

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

Je crée le cercle de la roue de la fortune en utilisant la toile html5. Cela fonctionne bien avec la couleur de style de remplissage. Je veux deux (2) images différentes dans des coupes aléatoires. Comment puis-je y parvenir?

voici mon 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);

Voici mon html

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

Sil te plait aide moi. Travailler le violon est ici


Vous pouvez utiliser une toile hors écran, où vous le feriez

  • dessine la première image, à la rotation actuelle,
  • appliquer le compositing dessus avec la moitié des tranches (1/2)
  • dessinez cette toile hors écran sur le principal,
  • répète les mêmes opérations avec la deuxième image

Voici une preuve laide du concept de base sur votre code, c'est vraiment moche, alors réécrivez-le s'il vous plaît.

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





html5-canvas