如何清除画布中图像上的矩形

2024-05-22

我需要清除画布中图像上绘制的矩形,而不损坏现有图像。我可以绘制小矩形点并将其清除。但问题是,当我清除矩形时,它在图像上仍保留为白色小斑点。

有人可以告诉我如何清除图像上的矩形而不损坏现有图像。

我使用了以下方法来清除矩形,但没有用。

1) context.fillStyle ="white";

2) context.clearRect(xCoordinate, yCoordinate, 10, 08);

提前致谢!


画布不是这样工作的。它是一个单层,默认情况下也是透明的。因此,考虑到这一点,您也许可以通过简单地为画布元素提供 CSS 背景来实现您想要的效果。这样,您在背景上绘制的任何内容都可以轻松删除,并且背景将显示出来。

#backed-canvas{
    background-image: url(http://www.placebear.com/300/200);
}

JSFiddle 示例:https://jsfiddle.net/yLf5erut/ https://jsfiddle.net/yLf5erut/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何清除画布中图像上的矩形 的相关文章

  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • 更新 Google 地图流量层而无需重新加载页面

    我的页面中嵌入了 Google 地图 我使用 initMap js 函数来初始化地图 function initMap var map new google maps Map document getElementById t map zo
  • 将具体数据放在jqgrid摘要视图标题中

    我有一个工作 jqgrid 表 在标题上有摘要视图 就像我在这个 plunkr 中实现的示例一样http plnkr co edit wjIlaVMsa9vusmfhgfL1 p preview http plnkr co edit wjI
  • 当我更改浏览器选项卡时,Jquery Animate 停止

    我的投资组合中有一个疯狂的问题 http hericdk com http hericdk com 我用jquery做了一个简单的动画 一个太空飞船飞行的动画 然后就出现了我的作品 这个想法不错 大家都喜欢 但问题是 由于某种奇怪的原因 当
  • 在 php、ajax 或 javascript 中加载进度?

    任何人都知道如何在系统仍在服务器端获取数据的同时在客户端显示加载进度以及完成的百分比 例如 当我在客户端按下 确定 按钮时 它会调用服务器端从数据库收集数据 整个过程可能需要2到3分钟 如何在客户端显示加载进度 大约加载完成了多少 我怎样才
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • jQuery:如何在显示元素的同时使用高亮效果?

    我在一个页面上有两个元素 div content div div style display none different content div 当我点击当前显示的div 我想隐藏它并显示另一个 这很容易做到 a hide b show
  • 从相机视图中拖动锁定在一定距离/半径处的对象

    我在场景中心有一个相机 距离相机 z 400 处有 1 个球体 其父级位于中心 我想从视图中向上 向下 向左 向右拖动球体 但同时不改变它相对于中心的 z 位置 我最终使用了另一个球体并使其不可见 添加side THREE DoubleSi
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • xpath:选择中断标签之前和之后的文本节点

    考虑以下因素 混合 br and br text1 br text2 br text3 br text4 br text5 如何找到每个文本节点 我正在考虑符合 br 标签之前或之后的条件的东西 但不确定是否 br and br 在 xpa
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • iOS Safari Mobile 禁用上一个和下一个选择输入

    上周五我发现了关于此问题的类似问题 但似乎无法再次找到它 如果有人能指出我正确的方向 那就太好了 本质上我在一个页面上有多个选择菜单 第一个在加载时填充 第二个在第一个选择时填充 够简单的 但是 在 iOS 设备中 当您点击选择元素时 它会
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • JavaScript 中最长的通用前缀

    我正在尝试解决 Leet Code 挑战14 最长公共前缀 https leetcode com problems longest common prefix 编写一个函数来查找字符串数组中最长的公共前缀字符串 如果没有公共前缀 则返回空字
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 向特定客户端发送消息以及消息发送用户

    我是 SignalR 的初学者 我创建了一个基于 SignalR 的基本聊天应用程序 我面临的问题是我想向特定客户端以及发送消息的用户发送消息 这个怎么做 我知道要向特定客户端发送消息 我们可以这样做 Clients Client Cont
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的
  • openssl_pkey_get_details($res) 不返回公共指数

    我在用着这个例子 https stackoverflow com a 12575951 2016196使用 php 生成的密钥进行 javascript 加密openssl图书馆 但是 details openssl pkey get de

随机推荐