Javascript 如何从控制盘获取画布的价值

如何获取画布的值。我有一个轮子，鼠标在轮子上旋转，现在我想回显它停止时的值。它正在打印整个阵列。不是车轮停在上面的那个

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

这是小提琴：

以下是完整的代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
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半径=150；
var wheel=document.createElement（'canvas'）；
var wheelCtx=wheel.getContext（'2d'）；
var indicator=document.createElement（'canvas'）；
var indicatorCtx=indicator.getContext（'2d'）；
var角度=PI2-PI2/4；
var myColor=[]；
对于（var i=0；i
我将所有内容都包装在一个容器中，这样就不会有任何全局变量


需要注意的是，角度计算是：

angle = degree * Math.PI / 180;

话虽如此，您可以计算当前度数并使用以下方法对其进行规格化：

(angle * (180 / Math.PI)) % 360

我添加了一个名为
getValue
的函数，该函数采用
angle
参数：

function getValue(angle) {
  var degree = (angle * (180 / Math.PI)) % 360,
      offsetIndex = (Math.floor(degree / sweepDegree) + offset) % myData.length,
      normalizedIndex = Math.abs(offsetIndex - (myData.length - 1));

  return myData[normalizedIndex];
}

它基本上计算当前度数，并根据动画初始化时的初始度数（即偏移量）对其进行规格化。然后，它将度除以扫描度，在本例中为30，因为有12个项目（即，
360/12===30
）并向下舍入

var sweepDegree = 360 / myData.length;
var offset = (360 - (angle * (180 / Math.PI)) % 360) / sweepDegree;

这适用于不同数量的数组项。换句话说，对于12个项目的集合长度，没有硬编码（就像在您的案例中一样），因此它应该适用于任何给定数量的项目

然后，您可以简单地使用
mouseover
事件侦听器中的
getValue
函数：



（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
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半径=150；
var wheel=document.createElement（'canvas'）；
var wheelCtx=wheel.getContext（'2d'）；
var indicator=document.createElement（'canvas'）；
var indicatorCtx=indicator.getContext（'2d'）；
var角度=PI2-PI2/4；
var sweepDegree=360/myData.length；
变量偏移=（360-（角度*（180/Math.PI））%360）/扫描角度；
var myColor=[]；
对于（var i=0；i$("#canvas").mouseover(function() {
  // ...
  alert(getValue(angle));
});

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

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

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