javascript - 添加值时推送数组，并显示到 Canvas - Javascript

标签 javascript html

美好的一天!我正在工作并创建一个旋转轮盘，我正在尝试将一个值插入到我的 Canvas 中，因此我不会手动将值添加到代码中，这是一个数组文本，所以我将在我的 Canvas 中插入许多数组，但是问题是文本没有显示，但是当我手动将文本添加到我的数组 [ ] 时它正在显示

这是我的 UI 中没有值/数组文本的样子

Spinner Roulette without Values in it

当我在这段代码中添加值时:

var options = ["Winner 1", "Winner 2"];

然后这是输出

enter image description here

现在的问题是当插入到我的文本框中时我无法添加值。请多多指教谢谢!

    var options = ["Winner 1", "Winner 2"];

    var startAngle = 0;
    var arc = Math.PI / (options.length / 2);
    var spinTimeout = null;
    
    var spinArcStart = 10;
    var spinTime = 0;
    var spinTimeTotal = 0;
    
    var ctx;
    
    document.getElementById("spin").addEventListener("click", spin);
    
    function pushData(){
      var inputText = document.getElementById('inputText').value;
    
      options.push(inputText);
    
      var pval = "";
    
      for(i = 0; i<options.length; i++){
        pval = pval + options[i];
      }
    
      document.getElementById('canvas').innerHTML =pval;
    }
    
    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 getColor(item, maxitem) {
      var phase = 0;
      var center = 128;
      var width = 127;
      var frequency = Math.PI*2/maxitem;
      
      red   = Math.sin(frequency*item+2+phase) * width + center;
      green = Math.sin(frequency*item+0+phase) * width + center;
      blue  = Math.sin(frequency*item+4+phase) * width + center;
      
      return RGB2Color(red,green,blue);
    }
    
    function drawRouletteWheel() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var outsideRadius = 200;
        var textRadius = 160;
        var insideRadius = 125;
    
        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);
    
        ctx.strokeStyle = "black";
        ctx.lineWidth = 2;
    
        ctx.font = 'bold 12px Helvetica, Arial';
    
        for(var i = 0; i < options.length; i++) {
          var angle = startAngle + i * arc;
          //ctx.fillStyle = colors[i];
          ctx.fillStyle = getColor(i, options.length);
    
          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.save();
          ctx.shadowOffsetX = -1;
          ctx.shadowOffsetY = -1;
          ctx.shadowBlur    = 0;
          ctx.shadowColor   = "rgb(220,220,220)";
          ctx.fillStyle = "black";
          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.restore();
        } 
    
        //Arrow
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
        ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
        ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
        ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
        ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
        ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
        ctx.fill();
      }
    }
    
    function spin() {
      spinAngleStart = Math.random() * 10 + 10;
      spinTime = 0;
      spinTimeTotal = Math.random() * 3 + 4 * 1000;
      rotateWheel();
    }
    
    function rotateWheel() {
      spinTime += 30;
      if(spinTime >= spinTimeTotal) {
        stopRotateWheel();
        return;
      }
      var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
      startAngle += (spinAngle * Math.PI / 180);
      drawRouletteWheel();
      spinTimeout = setTimeout('rotateWheel()', 30);
    }
    
    function stopRotateWheel() {
      clearTimeout(spinTimeout);
      var degrees = startAngle * 180 / Math.PI + 90;
      var arcd = arc * 180 / Math.PI;
      var index = Math.floor((360 - degrees % 360) / arcd);
      ctx.save();
      ctx.font = 'bold 30px Helvetica, Arial';
      var text = options[index]
      ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
      ctx.restore();
    }
    
    function easeOut(t, b, c, d) {
      var ts = (t/=d)*t;
      var tc = ts*t;
      return b+c*(tc + -3*ts + 3*t);
    }
    
    drawRouletteWheel();
<!-- Spin the wheel -->
<div class="container">
	<input type="button" class="mt-5 btn btn-lg btn-primary btn-block" value="SPIN THE WHEEL" style="float:left;" id='spin' />
</div>

<!-- The Wheel -->
<div class="text-center">
	<canvas id="canvas" width="500" height="500"></canvas>
</div>

<hr>

<!-- Insert new values -->
<div class="container col-md-4">
	<input type="text" class="form-control" id="inputText" name="inputText" /><br>
	<button class="btn btn-block btn-success" onclick="pushData();" type="button">ADD</button>
</div>

最佳答案

这是您问题的解决方案:

只需在 pushData 函数中进行以下更改:

function pushData(){
  var inputText = document.getElementById('inputText').value;
  options.push(inputText);
  drawRouletteWheel();
}

此外，您还需要在drawRouletteWheel 函数中计算圆弧。因为选项元素的长度会改变。

arc = Math.PI / (options.length / 2);


var options = ["Winner 1", "Winner 2" , "d"];


var startAngle = 0;
var spinTimeout = null;
var arc = 0;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

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

function pushData(){
  var inputText = document.getElementById('inputText').value;
  options.push(inputText);
  drawRouletteWheel();
}

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 getColor(item, maxitem) {
  var phase = 0;
  var center = 128;
  var width = 127;
  var frequency = Math.PI*2/maxitem;

  red   = Math.sin(frequency*item+2+phase) * width + center;
  green = Math.sin(frequency*item+0+phase) * width + center;
  blue  = Math.sin(frequency*item+4+phase) * width + center;

  return RGB2Color(red,green,blue);
}

function drawRouletteWheel() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var outsideRadius = 200;
    var textRadius = 160;
    var insideRadius = 125;

    ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,500,500);

    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = 'bold 12px Helvetica, Arial';
    //console.log(options.length)
    arc = Math.PI / (options.length / 2);
    for(var i = 0; i < options.length; i++) {
      var angle = startAngle + i * arc;
      //ctx.fillStyle = colors[i];
      ctx.fillStyle = getColor(i, options.length);

      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.save();
      ctx.shadowOffsetX = -1;
      ctx.shadowOffsetY = -1;
      ctx.shadowBlur    = 0;
      ctx.shadowColor   = "rgb(220,220,220)";
      ctx.fillStyle = "black";
      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.restore();
    } 

    //Arrow
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.fill();
  }
}

function spin() {
  spinAngleStart = Math.random() * 10 + 10;
  spinTime = 0;
  spinTimeTotal = Math.random() * 3 + 4 * 1000;
  rotateWheel();
}

function rotateWheel() {
  spinTime += 30;
  if(spinTime >= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px Helvetica, Arial';
  var text = options[index]
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
}

function easeOut(t, b, c, d) {
  var ts = (t/=d)*t;
  var tc = ts*t;
  return b+c*(tc + -3*ts + 3*t);
}

drawRouletteWheel();
 <!-- Spin the wheel -->
<div class="container">
    <input type="button" class="mt-5 btn btn-lg btn-primary btn-block" value="SPIN THE WHEEL" style="float:left;" id='spin' />
</div>

<!-- The Wheel -->
<div class="text-center">
    <canvas id="canvas" width="500" height="500"></canvas>
</div>

<hr>

<!-- Insert new values -->
<div class="container col-md-4">
    <input type="text" class="form-control" id="inputText" name="inputText" /><br>

    <button class="btn btn-block btn-success" onclick="pushData();" type="button">ADD</button>
</div>

关于javascript - 添加值时推送数组，并显示到 Canvas - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57782408/

上一篇：javascript - Vue 在子组件函数完成时调用父组件函数

下一篇：javascript - 如何将带参数的函数作为参数传递给函数？

相关文章：

javascript - jQuery 滚动当前位置和 Next-Prev Navigator

javascript - JavaScript 对象和函数的区别

javascript - 如何使用 DirectIO 而不是 PrintNormal 打印到 Zebra 打印机？

html - 使用 Handlebars js 生成静态 HTML 文件

javascript - 如何在 PHP 中从 AJAX jQuery 请求获取数据

javascript - 输入后有条件地应用 Angular 中的两个类之一？

html - 将自定义 li 元素符号与文本对齐

javascript - 部分滚动缩放动画

HTML masonry 布局问题 (asp.net)

javascript - 我怎样才能制作一个隐藏的 html 表格用于导出？

©2024 IT工具网  联系我们