javascript - 清除 Canvas 不起作用-6ren

javascript - 清除 Canvas 不起作用

转载作者：太空宇宙更新时间：2023-11-04 15:01:52

25

4

我有一个 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>

这是我的 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”——获取 Canvas 的二维上下文解决了部分问题。但是我的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 清除了 Canvas 中的错误区域，因为“零坐标”已移动到翻译中定义的坐标。表示 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);
    }

最佳答案

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

应该是:

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

关于javascript - 清除 Canvas 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33029509/

25

4

0

文章推荐： javascript - 如何使复选标记的颜色不同？

文章推荐： html - 如何仅使用 CSS 为 div 设置动画？

文章推荐： javascript - 如何阻止 jQuery .load() 函数多次触发？

文章推荐： c++ - 为什么迭代器从其 end() 获得的结果很奇怪？

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - 清除 Canvas 不起作用