javascript - 如何从轮子中获取 Canvas 的值(value)

Question

如何获取 Canvas 的值(value)。我有一个在鼠标上旋转的轮子，现在我想回显它停止时的值。它正在打印整个数组。不是那个轮子停在上面的那个。

$("#canvas").mouseover(function(){
  backup= ctx;
  alert(myData);
  ctx = null;
});

这是 fiddle :https://jsfiddle.net/z61n9ccx/3/

完整代码如下:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;


var PI2 = Math.PI * 2;
var myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var cx = 150;
var cy = 150;
var radius = 150;

var wheel = document.createElement('canvas');
var wheelCtx = wheel.getContext('2d');

var indicator = document.createElement('canvas');
var indicatorCtx = indicator.getContext('2d');


var angle = PI2 - PI2 / 4;

var myColor = [];
for (var i = 0; i < myData.length; i++) {
  myColor.push(randomColor());
}

makeWheel();
makeIndicator();

requestAnimationFrame(animate);

function makeWheel() {

  wheel.width = wheel.height = radius * 2 + 2;
  wheelCtx.lineWidth = 1;
  wheelCtx.font = '40px Pacifico, cursive';
  wheelCtx.textAlign = 'center';
  wheelCtx.textBaseline = 'middle';

  var cx = wheel.width / 2;
  var cy = wheel.height / 2;

  var sweepAngle = PI2 / myData.length;
  var startAngle = 0;
  for (var i = 0; i < myData.length; i++) {

    // calc ending angle based on starting angle
    var endAngle = startAngle + sweepAngle;

    // draw the wedge
    wheelCtx.beginPath();
    wheelCtx.moveTo(cx, cy);
    wheelCtx.arc(cx, cy, radius, startAngle, endAngle, false);
    wheelCtx.closePath();
    wheelCtx.fillStyle = myColor[i];
    wheelCtx.strokeStyle = 'black';
    wheelCtx.fill();
    wheelCtx.stroke();

    // draw the label
    var midAngle = startAngle + (endAngle - startAngle) / 2;
    var labelRadius = radius * .85;
    var x = cx + (labelRadius) * Math.cos(midAngle);
    var y = cy + (labelRadius) * Math.sin(midAngle);
    wheelCtx.fillStyle = 'gold';
    wheelCtx.fillText(myData[i], x, y);
    wheelCtx.strokeText(myData[i], x, y);

    // increment angle
    startAngle += sweepAngle;
  }


}

function makeIndicator() {
  indicator.width = indicator.height = radius + radius / 10;
  indicatorCtx.font = '40px Georgia';
  indicatorCtx.textAlign = 'center';
  indicatorCtx.textBaseline = 'middle';
  indicatorCtx.fillStyle = 'skyblue';
  indicatorCtx.strokeStyle = 'blue';
  indicatorCtx.lineWidth = 1;

  var cx = indicator.width / 2;
  var cy = indicator.height / 2;

  indicatorCtx.beginPath();
  indicatorCtx.moveTo(cx - radius / 8, cy);
  indicatorCtx.lineTo(cx, cy - indicator.height / 2);
  indicatorCtx.lineTo(cx + radius / 8, cy);
  indicatorCtx.closePath();
  indicatorCtx.fillStyle = 'skyblue'
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.beginPath();
  indicatorCtx.arc(cx, cy, radius / 3, 0, PI2);
  indicatorCtx.closePath();
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.fillStyle = 'blue';
  indicatorCtx.fillText('Prizes', cx, cy);
}



function animate(time) {
  ctx.clearRect(0, 0, cw, ch);
  ctx.translate(cw / 2, ch / 2);
  ctx.rotate(angle);
  ctx.drawImage(wheel, -wheel.width / 2, -wheel.height / 2);
  ctx.rotate(-angle);
  ctx.translate(-cw / 2, -ch / 2);
  ctx.drawImage(indicator, cw / 2 - indicator.width / 2, ch / 2 - indicator.height / 2)
  angle += PI2 / 360;
  requestAnimationFrame(animate);
}


function randomColor() {
  return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
var backup = null;
$("#canvas").mouseover(function() {
  backup = ctx;
  alert(myData);
  ctx = null;
});
$("#canvas").mouseout(function() {
  // backup= ctx;
  ctx = backup;
  animate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<canvas id="canvas" width="600" height="600" style="background-color:#ffff">
</canvas>

Answer 1

我添加了一个计数器，然后将其用作索引:https://jsfiddle.net/Twisty/L6nws9yz/2/

HTML

<canvas id="canvas" width="310" height="310" style="background-color:#ffff">
</canvas>
<div id="counterBox">
  <label>Counter:</label>
  <span></span>
</div>
<div id="countBox">
  <label>Index:</label>
  <span></span>
</div>

JS

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var PI2 = Math.PI * 2;
var myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var cx = 150;
var cy = 150;
var radius = 150;

var wheel = document.createElement('canvas');
var wheelCtx = wheel.getContext('2d');

var indicator = document.createElement('canvas');
var indicatorCtx = indicator.getContext('2d');
var currentSelection = 12;
var counter = 360;

var angle = PI2 - PI2 / 4;

var myColor = [];
for (var i = 0; i < myData.length; i++) {
  myColor.push(randomColor());
}

makeWheel();
makeIndicator();

requestAnimationFrame(animate);

function makeWheel() {

  wheel.width = wheel.height = radius * 2 + 2;
  wheelCtx.lineWidth = 1;
  wheelCtx.font = '40px Pacifico, cursive';
  wheelCtx.textAlign = 'center';
  wheelCtx.textBaseline = 'middle';

  var cx = wheel.width / 2;
  var cy = wheel.height / 2;

  var sweepAngle = PI2 / myData.length;
  var startAngle = 0;
  for (var i = 0; i < myData.length; i++) {

    // calc ending angle based on starting angle
    var endAngle = startAngle + sweepAngle;

    // draw the wedge
    wheelCtx.beginPath();
    wheelCtx.moveTo(cx, cy);
    wheelCtx.arc(cx, cy, radius, startAngle, endAngle, false);
    wheelCtx.closePath();
    wheelCtx.fillStyle = myColor[i];
    wheelCtx.strokeStyle = 'black';
    wheelCtx.fill();
    wheelCtx.stroke();

    // draw the label
    var midAngle = startAngle + (endAngle - startAngle) / 2;
    var labelRadius = radius * .85;
    var x = cx + (labelRadius) * Math.cos(midAngle);
    var y = cy + (labelRadius) * Math.sin(midAngle);
    wheelCtx.fillStyle = 'gold';
    wheelCtx.fillText(myData[i], x, y);
    wheelCtx.strokeText(myData[i], x, y);

    // increment angle
    startAngle += sweepAngle;
  }


}

function makeIndicator() {
  indicator.width = indicator.height = radius + radius / 10;
  indicatorCtx.font = '40px Georgia';
  indicatorCtx.textAlign = 'center';
  indicatorCtx.textBaseline = 'middle';
  indicatorCtx.fillStyle = 'skyblue';
  indicatorCtx.strokeStyle = 'blue';
  indicatorCtx.lineWidth = 1;

  var cx = indicator.width / 2;
  var cy = indicator.height / 2;

  indicatorCtx.beginPath();
  indicatorCtx.moveTo(cx - radius / 8, cy);
  indicatorCtx.lineTo(cx, cy - indicator.height / 2);
  indicatorCtx.lineTo(cx + radius / 8, cy);
  indicatorCtx.closePath();
  indicatorCtx.fillStyle = 'skyblue'
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.beginPath();
  indicatorCtx.arc(cx, cy, radius / 3, 0, PI2);
  indicatorCtx.closePath();
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.fillStyle = 'blue';
  indicatorCtx.fillText('Prizes', cx, cy);
}


var lastloop = new Date;
var thisloop = new Date;
var fps = 0;

function animate(time) {
  ctx.clearRect(0, 0, cw, ch);
  ctx.translate(cw / 2, ch / 2);
  ctx.rotate(angle);
  ctx.drawImage(wheel, -wheel.width / 2, -wheel.height / 2);
  ctx.rotate(-angle);
  ctx.translate(-cw / 2, -ch / 2);
  ctx.drawImage(indicator, cw / 2 - indicator.width / 2, ch / 2 - indicator.height / 2)
  angle += PI2 / 360;
  thisloop = new Date;
  fps = 1000 / (thisloop - lastloop);
  lastloop = thisloop;
  counter--;
  if (counter < 1) {
    counter = 360;
  }
  $("#counterBox span").html(counter);
  var index = counter / 30;
  $("#countBox span").html(Math.round(index));
  //$("#fpsBox span").html(fps);
  requestAnimationFrame(animate);
}


function randomColor() {
  return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

var backup = null;

$("#canvas").mouseover(function() {
  backup = ctx;
  alert(myData[Math.round(counter / 30)-1]);
  ctx = null;
});

$("#canvas").mouseout(function() {
  // backup= ctx;
  ctx = backup;
  animate();
});

计数器设置为 360，然后每一帧都会减少它。将其除以 30 (360/12)，您就可以数出每个楔形。我四舍五入，现在我有 0 - 11 个计数。

更新

我将索引移到了全局空间中。为了更精确，我使用了 % 运算符，如下所示:

  counter--;
  if (counter == 0) {
    counter = 360;
  }
  $("#counterBox span").html(counter);
  if (counter % 30 === 0) {
    index--;
  }
  $("#countBox span").html(Math.round(index));
  if (index === 0) {
    index = 12;
  }

当您将鼠标悬停在上面时，您会得到选择:

$("#canvas").mouseover(function() {
  backup = ctx;
  alert(index);
  ctx = null;
});