Question

我希望运行2个功能：1如果复选框选中了另一个，如果复选框不是。我似乎无法激活Wave（）函数。但draw（）函数是必需的。它只是在选中或以其他方式激活或取消激活复选框。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var PI2 = Math.PI*2; //place the circle on canvas
var cx = document.getElementById('xpos');
var cy = document.getElementById('ypos');
var fuzz = document.getElementById('blur');
var intensity = document.getElementById('intense');

//Gets the initial values for wave form
  var sinCheckBox = document.getElementById('sin');
  var sinInput = document.getElementById('sin-f');
  var periodInput = document.getElementById('period');
  var ampInput = document.getElementById('amps');
  var yPosInput = document.getElementById('Y-pos');

  var isDrawSin;
  var sinFrequency;
  var period;
  var amp;
  var yPosition;
  var xPosition;
  var factor;

  draw();

function validate() {
        if (document.getElementById('sin').checked) {
            wave();
        } else {
            draw();
        }
    }

function draw(){
  example = intensity.value/10;
  //console.log("the intensity = " + example);

  ctx.globalAlpha= example;
  ctx.fillStyle='rgba(25, 255, 50, 0.8)';
  ctx.shadowColor = 'rgba(25, 255, 50, 1)';
  ctx.shadowBlur = fuzz.value; 
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(cx.value,cy.value,3,0,PI2);
  ctx.closePath();
  ctx.fill();
  drawFrame();
  drawCross();

    requestAnimationFrame(draw);
}

  function wave() {
    resize();
    setParameters();
    drawFrame();
    drawCross();
    drawWave();
    requestAnimationFrame(wave);
  }

我希望draw（）函数在开始时处于活动状态，但是当用户检查'sinCheckBox = document.getElementById（'sin'）'切换到wave（）函数并停止draw（）函数时。反之亦然。

由于

Answer 1

我认为你不是从任何地方调用验证，您可能想要调用validate而不是draw。哪个将决定使用哪个功能

如何在检查时激活和停用功能

1 个答案: