Question

我想清除画布，然后立即点击同一个按钮绘制新形状。＆＃34;画出形状＆＃34;是我正在使用的按钮，它绘制给定参数的形状。现在，当我再次选择其他形状而不重新加载页面时，再次单击该按钮，它应该清除现有形状并仅显示新形状。但它覆盖了现有形状的新形状。有人可以说明我在做什么错吗？

代码：

＆＃13;

<!DOCTYPE html>
<html>
  <title>Blue Orchids School</title>
  <head align="centre"><b>Blue Orchids School</b></head>
  <body>
    <button onclick="draw()" type="submit">Draw shape</button><br><br>
    <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    <p id="details"></p>
    <script>
      function draw() {
        rendershape("Circle", 4, 22, 5, "Red")
        rendershape("Circle", 4, 220, 5, "Red")
      }
      function rendershape(shape, width, xcoordinate, ycoordinate, colour)
      {   
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.clearRect(0,0,c.width,c.height);
        
        //To draw a circle
        if(shape=='Circle'||shape=='circle')
        {
            ctx.lineWidth=width;
            ctx.arc(xcoordinate,ycoordinate,50,0,2*Math.PI);
            ctx.fillStyle= colour;
            ctx.fill();
            ctx.stroke();
        }

        document.getElementById("details").innerHTML += 'Shape: '  + shape + '<br>' + 'Colour : '+ colour + '<br>' +' X-coordinate: '+ xcoordinate + '<br>' +' Y-coordinate: '+ ycoordinate + '<br>' + ' Width: '+ width;
      }
    </script>
  </body>
</html>

＆＃13;

Answer 1

看起来像是一个错字。

ctx.clearRect(0,0,c.widht,c.height);

将其更改为：

ctx.clearRect(0,0,c.width,c.height);

Answer 2

您需要在ctx.beginPath()之后添加clearRect()。这是一个很好的解释：Why clearRect Might Not be Clearing the Canvas Pixels。

如果我们不调用beginPath（）（然后最好使用closePath（）关闭它），那么调用的所有绘图命令都将堆叠在内存中，并且每次调用stroke（）或fill（）时，它都会'将绘制所有图形路径。

context.clearRect（x，y，width，height）与单个按钮

2 个答案: