清除画布不起作用答案

【问题标题】：Clear Canvas doesn't work清除画布不起作用
【发布时间】：2015-10-09 03:37:42
【问题描述】：

我有一个画布，它是一些东西的容器。现在我想彻底清除全部内容。

这是我的 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 也得到了正确的值——我把它们打印出来看看里面有什么。

编辑：感谢“Yeldar Kurmangaliyev” - 获得画布的 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(); 
        }
    }

编辑2：我找到了第二个问题的解决方案。它是 context.translate。我假设 clear.Rect 清除了画布中的错误区域，因为“零坐标”已移动到翻译中定义的坐标。表示 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);
    }

【问题讨论】：

标签： javascript html canvas web

【解决方案1】：

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

应该是：

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

【讨论】：

同时设置全局变量通常是个坏主意
@Kaiido 我同意。来自原发帖人的代码sn-p。
为什么全局变量不好？性能问题还是容易出错？

【解决方案2】：

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

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

【讨论】：