Question

如何获得画布的价值。我有轮子在轮子上旋转鼠标停止现在我想要回显它停止的值。它正在打印整个阵列。不是轮子停在哪一个。

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

这是小提琴：https://jsfiddle.net/z61n9ccx/3/

以下是完整代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

我将所有内容都包含在IIFE中，以便没有任何全局变量。

Updated Example

重要的是要注意角度计算是：

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个项目的设定长度（例如在您的情况下），没有任何硬编码，因此它应该适用于任何给定数量的项目。

然后您可以在getValue事件监听器中使用mouseover函数：

Updated Example

$("#canvas").mouseover(function() {
  // ...
  alert(getValue(angle));
});

(function() {
  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 sweepDegree = 360 / myData.length;
  var offset = (360 - (angle * (180 / Math.PI)) % 360) / sweepDegree;

  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) {
    if (ctx === null) {
      return
    }
    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;
    ctx = null;

    alert(getValue(angle));
  });
  $("#canvas").mouseout(function() {
    ctx = backup;
    animate();
  });

  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];
  }
})();

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

如何从一个轮子获得帆布的价值

2 个答案: