Question

我有一个画布，它是某些东西的容器。现在我想完全清除整个内容。

这是我的HTML：

    <body>  
        <canvas id="my" width="1800" height="1000" style="border:3px solid"></canvas>     
        <br>
        <input type="button" value="line" onclick="drawline()"/>
        <input type="button" value="circle" onclick="drawcircle()"/>
        <input type="button" value="reset" onclick="reset()"/>
    </body>

这是我的Javascript：

    var canvas;
    var context;
    function drawline()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(70, 140);
        context.lineTo(140, 70);
        context.stroke();
    }

    function drawcircle()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        context.beginPath();
        context.arc(95,50,40,0,2*Math.PI);
        context.stroke();
        context.closePath();
    }

    function reset()
    {
        canvas = document.getElementById("my");
        canvas.clearRect(0,0, canvas.width, canvas.height);
    }

但重置按钮不起作用。我是初学者，已经尝试了一些调试：他进入了重置功能但在第二行崩溃了。 canvas.width和canvas.height也得到了正确的值 - 我打印出来看看它们是什么。

编辑：感谢＆＃34; Yeldar Kurmangaliyev＆＃34; - 获得画布的2d上下文解决了问题的一部分。但是我的js文件中的这种绘图仍然不会消失：

    function tree()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        for (var i = 0; i <= 1; i++)
        {
            if (i === 0)
            {
            context.translate(350, 200);
            }
            else
            {
            context.translate(0, 100);
            }

            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);
            context.lineTo(0, -140);
            context.lineTo(15, -110);
            context.lineTo(5, -110);        
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
            context.stroke(); 
        }
    }

EDIT2：我找到了第二个问题的解决方案。它是context.translate。我假设，clear.Rect清除画布中的错误区域，因为＆＃34;零坐标＆＃34;被移动到翻译中定义的坐标。平均值0.0在翻译350.200之后，然后是350.300,350.400，......

这是我的工作重置功能。感谢this post：

    function reset()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        context.setTransform(1, 0, 0, 1, 0, 0);
        context.clearRect(0,0, canvas.width, canvas.height);
    }

Answer 1

您正尝试在clearRect（DOM元素）的结果上调用document.getElementById。 clearRect是画布上下文的成员。

应该是：

function reset()
{
    canvas = document.getElementById("my");
    context = canvas.getContext("2d");
    context.clearRect(0,0, canvas.width, canvas.height);
}

Answer 2

因为clearRect占用了画布的context而不是canvas本身：

function reset()
{
    canvas = document.getElementById("my");
    var ctx = canvas.getContext("2d"); 
    ctx.clearRect(0,0, canvas.width, canvas.height);
}

Clear Canvas不起作用

2 个答案: