我如何清除画布？ [复制]

【问题标题】：how do i clear canvas? [duplicate]我如何清除画布？ [复制]
【发布时间】：2013-01-31 00:31:25
【问题描述】：

我有一个函数可以在触发 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>

【问题讨论】：

    标签： javascript html canvas html5-canvas


    【解决方案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);

    【讨论】：

    • 我已经更新了我的代码，添加了四个参数，但它仍然没有删除我设置的图像
    • 使用 ctx.clearRect(00,0,400,60);不是 ctx.clearRect(400,60,0,0);
    • 更新了代码。我尝试它仍然无法正常工作。它删除了我的地图顶部的条带，但没有删除 codectx.drawImage(imageone, 400, 60); imageone.src = 'alborg.jpg';code
    • 试试不行
    • 你能提供任何 jsfiddle 链接以便我调试吗？
    【解决方案2】：

    要清除“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>

    【讨论】：

    • 谢谢你，我整晚都在努力解决这个问题
    • 我不得不做 ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath();
    • @elrobis 你真的否决了我的回答，因为它不适合你的不同情况......多么粗鲁！
    • 实际上我只是删除了我最初的投票，因为我认为下面的答案与项目无关。
    • ...现在我想起来了，我的桌面鼠标很糟糕，有时左键会卡住。我可能无意中双击了否决票——当时似乎发生了一些奇怪的事情。我并不是要批评您的答案，而是要宣传它下面的答案。无论如何要抵消意想不到的结果？
    【解决方案3】：

    clearRect 接受四个参数：x、y、宽度和高度。另外，是ctx 还是context？使用正确的变量。

    【讨论】：

    • 它仍然无法正常工作我编辑了我的代码，我尝试删除我的甜点图片。但它仍然存在
    • “四论”哪一部分不清楚？四。 四个。不是两个，四个！！！
    • 我已经更新了我的代码，添加了四个 aguurment 没有发生任何事情。
    • 我也给了你论据的顺序......
    • 更新了代码。我尝试它仍然无法正常工作。它删除了我的地图顶部的条带，但没有删除 ctx.drawImage(imageone, 400, 60); imageone.src = 'alborg.jpg';代码添加了整个代码
    猜你喜欢
    • 2015-06-24
    • 1970-01-01
    • 2018-10-04
    • 2013-03-28
    • 1970-01-01
    • 2020-07-05
    • 1970-01-01
    • 1970-01-01
    • 2016-08-22
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode