清除画布不起作用

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);
    }

但是重置按钮不起作用。 我是一个初学者，已经尝试了一些调试：他进入了reset函数，但在第二行崩溃了。 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(); 
        }
    }

EDIT2：我找到了第二个问题的解决方案。 它是context.translate。 我认为clear.Rect会清除画布中的错误区域，因为“零坐标”已移动到平移中定义的坐标。 意思是0.0是在翻译350.200之后，然后是350.300、350.400，...

现在这是我的工作重置功能。 感谢这篇文章：

    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

您试图对document.getElementById （DOM元素）的结果调用clearRect 。 clearRect是canvas上下文的成员。

它应该是：

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);
}

清除画布不起作用

问题描述

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