Question

我有一个在触发if语句后在画布上绘制内容的函数。我想知道如何在从坐标（if语句之外）删除后清除画布，我不知道该怎么做。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function startCanvas() {
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");

                var one = c.getContext("2d");
                var two = c.getContext("2d");
                var three = c.getContext("2d");
                var four = c.getContext("2d");
                var five = c.getContext("2d");
                var clearCanvas = false;

                var image = new Image();
                var imageone = new Image();

                image.onload = function () {
                    ctx.drawImage(image, 69, 50);

                    //draw a circle
                    one.beginPath();
                    one.arc(180, 90, 10, 0, Math.PI * 2, true);
                    one.closePath();
                    one.fill();

                    two.beginPath();
                    two.arc(155, 138, 10, 0, Math.PI * 2, true);
                    two.closePath();
                    two.fill();

                    three.beginPath();
                    three.arc(160, 180, 10, 0, Math.PI * 2, true);
                    three.closePath();
                    three.fill();

                    four.beginPath();
                    four.arc(257, 210, 10, 0, Math.PI * 2, true);
                    four.closePath();
                    four.fill();

                    five.beginPath();
                    five.arc(238, 235, 10, 0, Math.PI * 2, true);
                    five.closePath();
                    five.fill();
                };

                image.src = 'denmark.jpg';

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 170 && e.x <= 190) && (e.y >= 80 && e.y <= 100)) {
                            alert('this is a test');
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148)) {
                            ctx.font = "30px Arial";
                            ctx.fillText("Hello World", 400, 20);
                            ctx.drawImage(imageone, 400, 60);
                            imageone.src = 'alborg.jpg';
                        } else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) {
                            ctx.clearRect(0, 0, 400, 60);
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 150 && e.x <= 190) && (e.y >= 170 && e.y <= 190)) {
                            alert('also work');
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 247 && e.x <= 290) && (e.y >= 200 && e.y <= 220)) {
                            alert('ok');
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 228 && e.x <= 290) && (e.y >= 225 && e.y <= 245)) {
                            alert('yes');
                        }
                    },
                    false);
            }
        </script>
    </head>
    <body onload="startCanvas()">
        <canvas id="myCanvas" width="600" height="600">Your browser does not support the HTML5 canvas tag.</canvas>
    </body>
</html>

Answer 1

使用

ctx.clearRect(x, y, canvas_width, canvas_height);
//In your code x=0,y=0, canvas_width=400 and canvas_height=60

而不是

ctx.clearRect(400,60,0,0);

更新： -

尝试此更新...

 else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) { 
 ctx.clearRect(0,0,400,60);
 one.clearRect(0,0,400,60);
 two.clearRect(0,0,400,60);
 three.clearRect(0,0,400,60);
 four.clearRect(0,0,400,60);
 five.clearRect(0,0,400,60);
}

更新

        c.addEventListener('mousemove',function (e) {
  if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148)) {
   console.log("Hello"); 
      ctx.clearRect(0, 0, 400, 60);
      one.clearRect(0, 0, 400, 60);
      two.clearRect(0, 0, 400, 400);
      three.clearRect(0, 0, 400, 60);
      four.clearRect(0, 0, 400, 60);
  five.clearRect(0, 0, 400, 60);

  }  else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) {         
  console.log("hi");      
  }
  }, false);

Answer 2

clearRect有四个参数：x，y，width和height。此外，是ctx还是context？使用正确的变量。

Answer 3

要清除“Hello World”和“alborg.jpg”的画布，请使用：ctx.clearRect（400,0,200,600）

示例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">
    function startCanvas() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var one = c.getContext("2d");
        var two = c.getContext("2d");
        var three = c.getContext("2d");
        var four = c.getContext("2d");
        var five = c.getContext("2d");
        var clearCanvas = false;

        var image = new Image();
        var imageone = new Image();

        image.onload = function () {
            ctx.drawImage(image, 69, 50);

            //draw a circle
            one.beginPath();
            one.arc(180, 90, 10, 0, Math.PI * 2, true);
            one.closePath();
            one.fill();

            two.beginPath();
            two.arc(155, 138, 10, 0, Math.PI * 2, true);
            two.closePath();
            two.fill();

            three.beginPath();
            three.arc(160, 180, 10, 0, Math.PI * 2, true);
            three.closePath();
            three.fill();

            four.beginPath();
            four.arc(257, 210, 10, 0, Math.PI * 2, true);
            four.closePath();
            four.fill();

            five.beginPath();
            five.arc(238, 235, 10, 0, Math.PI * 2, true);
            five.closePath();
            five.fill();
        };

        image.src = 'coffee.png';


     c.addEventListener('mousemove',
     function (e) {
         if ((e.x >= 170 && e.x <= 190) && (e.y >= 80 && e.y <= 100)) {
             alert('this is a test');
         }
     }
     , false);


     c.addEventListener('mousemove',
     function (e) {
      if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148)) {
          ctx.font = "30px Arial";
          ctx.fillText("Hello World", 400, 20);
          ctx.drawImage(imageone, 400, 60);
          imageone.src = 'house-icon.png';
      } else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) {
      //
      //
      // HERE IS THE CHANGE TO MAKE YOUR CODE WORK !!!
      //
      // Use this to clear only the "Hello World" and "alborg.jpg"
      //
      //
                ctx.clearRect(400,0,200,600);
      //
      //
      //
            }
        }
        , false);


      c.addEventListener('mousemove',
      function (e) {
           if ((e.x >= 150 && e.x <= 190) && (e.y >= 170 && e.y <= 190)) {
               alert('also work');
           }
       }
       , false);

       c.addEventListener('mousemove',
          function (e) {
              if ((e.x >= 247 && e.x <= 290) && (e.y >= 200 && e.y <= 220)) {
                  alert('ok');
              }
          }
          , false);

        c.addEventListener('mousemove',
        function (e) {
            if ((e.x >= 228 && e.x <= 290) && (e.y >= 225 && e.y <= 245)) {
                alert('yes');
            }
        }
        , false);

    }
</script>
</head>
<body onload="startCanvas()">
<canvas id="myCanvas" width="600" height="600";">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

我如何清除画布？

3 个答案:

更新： -

更新