Question

因此，在我的代码中，我在全屏画布中绘制了一个箭头。一秒钟后，它将被我的清晰画布功能删除，它可以正常工作。现在应绘制一个圆圈。也工作得很好。之后我想再次清除画布，但它不再起作用了。有谁知道为什么它只能工作一次？非常感谢，任何答案都会有所帮助！

＆＃13;

function generateRandomNumber() {
  var minangle = 0;
  var maxangle = 2 * Math.PI;
  randangle = Math.random() * (maxangle - minangle) + minangle;
  return randangle;
};


function createArrowAngle() {
  var currentangle = generateRandomNumber();
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var x1 = centerX + 50 * Math.cos(currentangle);
  var y1 = centerY + 50 * Math.sin(currentangle);
  var x2 = centerX + 50 * Math.cos(currentangle + Math.PI);
  var y2 = centerY + 50 * Math.sin(currentangle + Math.PI);
  return [x1, y1, x2, y2]
}

function drawCircle(circleColour) {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 20;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = circleColour;
  context.fill();
  context.lineWidth = 20;
  context.strokeStyle = circleColour;
  context.stroke();
}

function drawArrow(fromx, fromy, tox, toy, colourarrow) {
  //variables to be used when creating the arrow
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var headlen = 3;

  var angle = Math.atan2(toy - fromy, tox - fromx);

  //starting path of the arrow from the start square to the end square and drawing the stroke
  ctx.beginPath();
  ctx.moveTo(fromx, fromy);
  ctx.lineTo(tox, toy);
  ctx.strokeStyle = colourarrow;
  ctx.lineWidth = 20;
  ctx.stroke();

  //starting a new path from the head of the arrow to one of the sides of the point
  ctx.beginPath();
  ctx.moveTo(tox, toy);
  ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));

  //path from the side point of the arrow, to the other side point
  ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 7), toy - headlen * Math.sin(angle + Math.PI / 7));

  //path from the side point back to the tip of the arrow, and then again to the opposite side point
  ctx.lineTo(tox, toy);
  ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));

  //draws the paths created above
  ctx.strokeStyle = colourarrow;
  ctx.lineWidth = 20;
  ctx.stroke();
  ctx.fillStyle = colourarrow
  ctx.fill();
}

function clearcanvas1(canvastoclear) {
  var canvas = document.getElementById(canvastoclear),
    ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

try {
  var canvas = document.getElementById("myCanvas");
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  var differentcolours = ['#FFA500', '#FFFF00', '#FF0000', '#0000FF', '#008000', '#EE82EE', '#40E0D0', '#FFFFFF'];
  var angles = createArrowAngle();

  //draw an arrow after 1 second
  drawArrow(angles[0], angles[1], angles[2], angles[3], differentcolours[7]);
  //clear canvas after 1 second --> this works
  setTimeout(function() {
    clearcanvas1("myCanvas")
  }, 1000);
  //draw a circle after 4 seconds --> this works
  setTimeout(function() {
    drawCircle(differentcolours[7])
  }, 4000);
  //clear canvas after 1 second --> this doesn't work
  setTimeout(function() {
    clearcanvas1("myCanvas")
  }, 1000);

} catch (err) {
  document.getElementById("demo").innerHTML = err.message;
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

#myCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

＆＃13;

<body bgcolor='black'>
  <canvas id="myCanvas" oncl></canvas>
  <p id="demo" style="color: white" oncl></p>
</body>

＆＃13;

Answer 1

问题是你假设function Some-Function ($objectarray, $parameter) { $result = $objectarray | Select Name, $parameter }会等待函数执行，而不是，

setTimeout

您希望绘制箭头，然后在1秒后清除画布，然后在4秒后绘制圆圈，然后在1秒后清除画布，发生了什么，它绘制箭头，然后它会在1秒后清除画布两次，然后在3秒后画出圆圈。我会将最后一次超时更改为5000，您将获得假定的功能

//draw an arrow after 1 second
drawArrow(angles[0],angles[1],angles[2],angles[3],differentcolours[7]);  
//clear canvas after 1 second --> this works
setTimeout(function(){clearcanvas1("myCanvas")},1000);
//draw a circle after 4 seconds --> this works
setTimeout(function(){drawCircle(differentcolours[7])},4000);
//clear canvas after 1 second --> this doesn't work
setTimeout(function(){clearcanvas1("myCanvas")},1000);

你可以在这里看到它

//draw an arrow after 1 second
drawArrow(angles[0],angles[1],angles[2],angles[3],differentcolours[7]);  
//clear canvas after 1 second --> this works
setTimeout(function(){clearcanvas1("myCanvas")},1000);
//draw a circle after 4 seconds --> this works
setTimeout(function(){drawCircle(differentcolours[7])},4000);
//clear canvas after 1 second --> this doesn't work
setTimeout(function(){clearcanvas1("myCanvas")},5000);

          function generateRandomNumber() {
          var minangle = 0;
          var maxangle = 2*Math.PI;
          randangle = Math.random() * (maxangle- minangle) + minangle;
              return randangle;
          };         


            function createArrowAngle() {
              var currentangle=generateRandomNumber();
              var canvas = document.getElementById('myCanvas');
              var context = canvas.getContext('2d');
              var centerX = canvas.width / 2;
              var centerY = canvas.height / 2;
              var x1=centerX+50*Math.cos(currentangle);
              var y1=centerY+50*Math.sin(currentangle);
              var x2=centerX+50*Math.cos(currentangle+Math.PI);
              var y2=centerY+50*Math.sin(currentangle+Math.PI);
              return [x1, y1, x2, y2]
          }

         function drawCircle(circleColour) {
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var centerX = canvas.width / 2;
          var centerY = canvas.height / 2;
          var radius = 20;

          context.beginPath();
          context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
          context.fillStyle = circleColour;
          context.fill();
          context.lineWidth = 20;
          context.strokeStyle = circleColour;
          context.stroke();
               }

               function drawArrow(fromx, fromy, tox, toy, colourarrow){
                    //variables to be used when creating the arrow
                    var c = document.getElementById("myCanvas");
                    var ctx = c.getContext("2d");
                    var headlen = 3;

                    var angle = Math.atan2(toy-fromy,tox-fromx);

                    //starting path of the arrow from the start square to the end square and drawing the stroke
                    ctx.beginPath();
                    ctx.moveTo(fromx, fromy);
                    ctx.lineTo(tox, toy);
                    ctx.strokeStyle = colourarrow;
                    ctx.lineWidth = 20;
                    ctx.stroke();

                    //starting a new path from the head of the arrow to one of the sides of the point
                    ctx.beginPath();
                    ctx.moveTo(tox, toy);
                    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

                    //path from the side point of the arrow, to the other side point
                    ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));

                    //path from the side point back to the tip of the arrow, and then again to the opposite side point
                    ctx.lineTo(tox, toy);
                    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

                    //draws the paths created above
                    ctx.strokeStyle = colourarrow;
                    ctx.lineWidth = 20;
                    ctx.stroke();
                    ctx.fillStyle = colourarrow
                    ctx.fill();
                }

                         function clearcanvas1(canvastoclear)
         {
         var canvas = document.getElementById(canvastoclear),
            ctx = canvas.getContext("2d");
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         }
         
         try {
         var canvas = document.getElementById("myCanvas");
         canvas.width = innerWidth;
         canvas.height = innerHeight;
         var differentcolours = ['#FFA500','#FFFF00','#FF0000','#0000FF','#008000','#EE82EE','#40E0D0','#FFFFFF'];
         var angles=createArrowAngle();

    //draw an arrow after 1 second
         drawArrow(angles[0],angles[1],angles[2],angles[3],differentcolours[7]);  
    //clear canvas after 1 second --> this works
         setTimeout(function(){clearcanvas1("myCanvas")},1000);
    //draw a circle after 4 seconds --> this works
         setTimeout(function(){drawCircle(differentcolours[7])},4000);
    //clear canvas after 1 second --> this doesn't work
         setTimeout(function(){clearcanvas1("myCanvas")},5000);

                 }
         catch(err) {
             document.getElementById("demo").innerHTML = err.message;
         }

         * { margin: 0; padding: 0;}
         body, html { height:100%; }
         #myCanvas {
         position:absolute;
         width:100%;
         height:100%;
         }

Answer 2

请记住，调用是异步的。

你只需要这个

//draw an arrow after 1 second
  drawArrow(angles[0], angles[1], angles[2], angles[3], differentcolours[7]);
  //clear canvas after 1 second --> this works
  setTimeout(function () { clearcanvas1("myCanvas") }, 1000);
  //draw a circle after 4 seconds --> this works
  setTimeout(function () { 
    drawCircle(differentcolours[7])
    setTimeout(function () { clearcanvas1("myCanvas") }, 1000);
  }, 4000);

Clear Canvas只能使用一次

2 个答案: