Clear Canvas不起作用

Question

Clear Canvas不起作用

我有一个画布,是一些东西的容器.现在我想完全清除整个内容.

这是我的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>

Run Code Online (Sandbox Code Playgroud)

这是我的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);
    }

Run Code Online (Sandbox Code Playgroud)

但重置按钮不起作用.我是初学者,已经尝试了一些调试:他进入重置功能,但在第二行崩溃.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(); 
        }
    }

Run Code Online (Sandbox Code Playgroud)

EDIT2:我找到了第二个问题的解决方案.它是context.translate.我假设,clear.Rect清除画布中的错误区域,因为"零坐标"被移动到在translate中定义的坐标.平均值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);
    }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Yel*_*yev 5

您正在尝试调用(DOM元素)clearRect的结果document.getElementById.clearRect是canvas上下文的成员.

它应该是:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，4 月前
查看次数：	1569 次
最近记录：	10 年，4 月前