1

Есть барабан, каждый сектор - определенного цвета. Нужно чтоб каждый сектор имел свой background-image. Предоставляю часть JS-а:

var canvas = document.getElementById('canvas');
var windowwidth = window.innerWidth
    var width;
    var height;

    if (windowwidth < 1140) {
        //height = window.innerHeight;
      height = 320;
        width = 320;
    } else {
        width = 500;
        height = 500;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);
    var options = ["ליבי הסוסה", "היפופוטם", "נחום הינשוף", "החמור יוגב",
  "ליבי הסוסה", "היפופוטם", "נחום הינשוף", "החמור יוגב"
];
var coloroptions = ["#4E63AD", "#9475b0", "#f26722", "#2e9874", "#4E63AD", "#9475b0", "#f26722", "#2e9874"];
 var imgarray = ["https://www.aniboaz.co.il/Blog/libi/wp-content/uploads/sites/4/2016/04/libi_new_2.png" , "https://www.aniboaz.co.il/Blog/libi/wp-content/uploads/sites/4/2016/04/libi_new_2-02.jpg"];
 var linka = ["#"];

var startAngle = 110;
var arc = Math.PI / (options.length / 2);
var spinTimeout = null;

var spinArcStart = 220;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

document.getElementById("spin").addEventListener("click", spin);

function byte2Hex(n) {
  var nybHexString = "0123456789ABCDEF";
  return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}

function RGB2Color(r, g, b) {
  return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}

function drawRouletteWheel() {

  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var outsideRadius = 200;
    var textRadius = 150;
    var insideRadius = 40;
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);

    ctx.strokeStyle = "Teal";
    ctx.lineWidth = 1;

    ctx.font = "bold 18px Rubik, sans-serif";

    for (var i = 0; i < options.length; i++) {
      var angle = startAngle + i * arc;
      //ctx.fillStyle = colors[i] ** getColor(i,options.length) ;
      ctx.fillStyle = coloroptions[i];

      ctx.beginPath();
      ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
      ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      ctx.shadowOffsetX = -10;
      ctx.shadowOffsetY = -10;
      ctx.shadowBlur = 30;
      ctx.shadowColor = "rgba(0,0,0,0.5)";
      ctx.save();
       var imageObj = new Image();
           ctx.fillStyle = "white";
      ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,        250 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = options[i];            
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.drawImage(imageObj, 5, 20, 40, 40);
          ctx.restore();          
    }

    //Arrow

    ctx.beginPath();
    ctx.moveTo(250 - 15, 250 - (outsideRadius + 25));
    ctx.lineTo(250 + 15, 250 - (outsideRadius + 25));
    ctx.lineTo(250 + 15, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 15, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 15, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 15, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 15, 250 - (outsideRadius + 15));
    ctx.shadowOffsetX = +10;
    ctx.shadowOffsetY = 22;
    ctx.shadowBlur = 20;
    ctx.shadowColor = "rgba(0,0,0,0.5)";
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.end;
  }
}

ссылка на код: https://codepen.io/CTACON23/pen/dLjzMW

(код не мой)

fillStyle не подходит, drawImage не работает с елементами такого типа

5
  • для этих целей лучше подойдет svg 22 апр 2019 в 12:45
  • 1
    с элементами какого типа не работает drawImage? почему не подходит fillStyle? Добавь пример того, как это в итоге должно выглядеть
    – Grundy
    22 апр 2019 в 14:01
  • @Grundy должно выглядеть так: prntscr.com/nfm0aw (в каждом секторе на фоне своя картинка)
    – CTACO23
    23 апр 2019 в 6:48
  • @CTACO23 обязательно это должна быть канва? 23 апр 2019 в 14:38
  • ru.stackoverflow.com/a/676530/178988
    – Qwertiy
    23 апр 2019 в 15:21

1 ответ 1

2

Кликайте несколько раз, чтобы крутить барабан

let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
context.strokeStyle = 'white';
context.lineWidth = 5;
let angle = 0, speed = 0;

let images = [
  {url:'https://i.stack.imgur.com/GkUv4.jpg'},
  {url:'https://i.stack.imgur.com/gFeUb.png'},
  {url:'https://i.stack.imgur.com/gW9Md.png'},
  {url:'https://i.stack.imgur.com/GkUv4.jpg'},
  {url:'https://i.stack.imgur.com/gFeUb.png'},
  {url:'https://i.stack.imgur.com/gW9Md.png'},
  {url:'https://i.stack.imgur.com/GkUv4.jpg'},
  {url:'https://i.stack.imgur.com/gFeUb.png'},
  {url:'https://i.stack.imgur.com/gW9Md.png'}
];

load(images);

function load(imgs) {
  let loading = images.find(i => !i.pattern);
  if (!loading) 
    return draw();
  let img = new Image();    
  img.src = loading.url;
  img.onload = function() {
    loading.pattern = context.createPattern(img, 'repeat');
    load(imgs);
  }
}

addEventListener('click', () => speed += 1 + Math.random()*5)

let k = Math.PI*2/images.length;
let t = new Date().getTime();
  
function draw() {
  let dt = new Date().getTime() - t;
  t += dt;
  angle += speed*dt/1000;
  speed = speed*0.99;
  
  context.clearRect(0,0,canvas.width, canvas.height)
  rotate(angle);
  images.forEach((img, i) => {
    context.fillStyle = img.pattern;
    arc(245,k*i,k*i+k);
  })
  context.fillStyle = 'white';
  arc(100,0,Math.PI*2);
  rotate(-angle);
  requestAnimationFrame(draw);
}

function rotate(a) {
  context.translate(canvas.width/2,canvas.height/2);
  context.rotate(a)
  context.translate(-canvas.width/2,-canvas.height/2);
}

function arc(radius,a1,a2){
    context.beginPath();
    context.moveTo(canvas.width/2,canvas.height/2);
    context.arc(canvas.width/2,canvas.height/2,radius,a1,a2);
    context.closePath();
    context.fill();
    context.stroke()
}
<canvas width=500 height=500 style="height:90vh"></canvas>

1
  • @CTACO23 осталось самое интересное - задать скорость и направление вращения с каким нибудь подобием физичности 24 апр 2019 в 6:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.