清除画布不起作用

Question

I have a canvas that is the container for some stuff. 我有一块帆布，是一些东西的容器。 Now I want to completly clear the whole content. 现在，我要完全清除所有内容。

Here my HTML: 这是我的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>

Here my Javascript: 这是我的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);
    }

But the reset button don't work. 但是重置按钮不起作用。 I'm a beginner and already tried some debugging: He goes into the reset function but crashed at the second line. 我是一个初学者，已经尝试了一些调试：他进入了reset函数，但在第二行崩溃了。 canvas.width and canvas.height also got the right values - I printed them out to see what's in. canvas.width和canvas.height也具有正确的值-我将它们打印出来以查看其中的值。

EDIT: Thanks to "Yeldar Kurmangaliyev" - to get the 2d context of the canvas solved a part of the problem. 编辑：感谢“ Yeldar Kurmangaliyev”-获得画布的2d上下文解决了部分问题。 But this kind of drawing in my js file still won't disappear: 但是我的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: I found the solution for the second problem. EDIT2：我找到了第二个问题的解决方案。 It is the context.translate. 它是context.translate。 I assume, the clear.Rect clears the wrong area in the canvas because the "zero coordinates" were moved to the coordinates that are defined in the translate. 我认为clear.Rect会清除画布中的错误区域，因为“零坐标”已移动到平移中定义的坐标。 Means 0.0 is after the translate 350.200 and then 350.300, 350.400, ... 意思是0.0是在翻译350.200之后，然后是350.300、350.400，...

This is now my working reset function. 现在这是我的工作重置功能。 Thanks to 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

You are trying to call clearRect on the result of document.getElementById (DOM element). 您试图对document.getElementById （DOM元素）的结果调用clearRect 。 clearRect is a member of canvas context. clearRect是canvas上下文的成员。

It should be: 它应该是：

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

Answer 2

Because clearRect takes the context of the canvas and not the canvas itself: 因为clearRect接受画布的context ，而不是canvas本身：

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

清除画布不起作用

问题描述

2 个解决方案

解决方案1
5 已采纳 2015-10-09 03:39:31

解决方案2
0 2015-10-09 03:41:21

清除画布不起作用

问题描述

2 个解决方案

解决方案1 5 已采纳 2015-10-09 03:39:31

解决方案2 0 2015-10-09 03:41:21

解决方案1
5 已采纳 2015-10-09 03:39:31

解决方案2
0 2015-10-09 03:41:21