如何从画布中添加和删除(多个)图像?

2023-11-30

我是画布(HTML5)新手,我必须在画布上设计一个绘画应用程序。有一个功能,例如在画布上动态添加所选图像(通过鼠标移动)以及删除和拖动添加的图像的功能(与文本添加相同)。现在我的问题是我们如何从画布中删除图像(注意:添加到画布中的图像没有固定数量。)您能给我建议一下方法吗?


HTML5 Canvas 很像现实世界的画布。当您在画布上绘制时,墨水会改变画布,与已有的其他内容混合并永远改变它们。

问莫奈“你如何在你的画中添加一个新的人物?”他可能会说“你只需要把它们画在你想要的地方就可以了!”同样,你使用drawImage()将图像“绘制”到您的画布上。

然而,如果你问莫奈“你怎么remove画中人?”他可能会用滑稽的眼神看着你然后做出回应“Quoi?你要么必须画一幅新画,要么在这个人的上面画!”同样,如果您想从画布上“删除”某些内容,您要么必须重新开始(清除画布并绘制除该内容之外的所有内容),要么重新绘制图像“后面”的内容。

这是我做的一个例子这显示了一种方法,您可以“保存”画布的一部分(通过将其绘制到另一个画布),然后将其绘制回某些东西上以“擦除”它。

不过,我通常建议您不要使用 HTML5 Canvas,除非您知道为什么需要它。您提到添加和删除项目,以及检测鼠标移动。用一个保留模式绘图系统(如 HTML 或 SVG)意味着您实际上在对象表示中添加、删除或更改项目,并且由其他人(浏览器)来确定如何最好地重新绘制它们。

最好的方法可能是让用户输入的“绘制”部分在一个或多个画布上完成,然后将这些画布与其他项目(例如<div>带有文本的 s,或者<img>用于图片或基于矢量的 SVG 图稿)。

您可以在画布类型上创建自己的保留模式系统,也可以使用其他人的库来执行此操作。但我建议您考虑这是否是实现目标的最佳和最简单的方法。

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

如何从画布中添加和删除(多个)图像? 的相关文章

  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • HTML5 服务器端事件:EventSource 与包装的 WebSocket

    HTML5 服务器发送事件 SSE API 是否只是 HTML5 WebSocket 之上的受限制的 基于事件的 API 在我看来 一个EventSource只是一个WebSocket that Cannot send data 使用tex
  • 向对象添加元素

    我需要填充一个 json 文件 现在我有这样的东西 element id 10 quantity 1 我需要添加另一个 元素 我的第一步是使用该 json 将该 json 放入对象类型中cart JSON parse 现在我需要添加新元素
  • dompdf:找不到图像或类型未知

    这是我的代码 我几乎尝试了所有在 PDF 上显示图像的方法 但仍然不起作用 你能帮我解决这个问题吗 我还将 DOMPDF ENABLE REMOTE 设置为 true 结果仍然相同 require once dompdf autoload
  • Bing.com 如何创建放大的缩略图?

    当我使用 Bing com 搜索图像时 我发现它们的图像经过精心裁剪和排序 当您将鼠标放在图像上时 会弹出另一个窗口 其中显示放大的图像 我想在我的程序中做同样的事情 我检查了他们页面的源代码 他们正在使用 javascript 但我仍然不
  • 提交前验证表单(比检查空字段更复杂)

    我有一个包含时间输入的表单 具体来说 开放时间和结束时间 当按下提交按钮时 它会转到一个 php 页面 其中这些输入将添加到数据库中 在允许提交表单之前我想检查一些事情 例如 我想确保开始时间早于 小于 结束时间 这是表格 Opens
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 带 CSS 网格的等宽侧边栏列

    是否可以让左右列具有相同的宽度 而中间列占据剩余空间 我不想设置像这样的百分比grid template columns 20 60 20 因为并不总是确定这些列的内容是什么 Flexbox 和表格似乎没有解决这个问题的方法 所以我再次尝试
  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • Window 与 Var 声明变量[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中使用 var 和不使用 var 的区别 https stackoverflow com questions 1470488 difference between using v
  • 元素中优先考虑 ngclick 而非 nghref

    tl dr 如何强制 Angular 只执行 ngclick 指令 a 元素而不清空 删除href 我的网站在某些元素上有一些自定义行为 模式打开 位置栏更新等 但对于 SEO 索引我also需要它成为一个 a 元素与href包含有效链接的
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关
  • 如何在粘贴时获取文本区域输入字段的新值?

    我发现当我尝试从文本区域字段读取值时onpaste调用函数时 我得到字段的旧值 粘贴操作之前的值 而不是新值 粘贴操作之后的值 以下是此行为的演示 http jsfiddle net qsDnr http jsfiddle net qsDn
  • 使用 jQuery Tablesorter 操作后如何恢复当前页面?

    我正在使用 tablesorter 但无法找到有关插件 tablesorter 寻呼机的任何文档 问题是我有一个显示一些数据的表 并且在每一行中都有一个删除链接 该链接附加了要删除的元素的唯一标识符 显然 是否可以保存我正在删除的页面 然后
  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • FullCalendar 检查选择日是否有活动?

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓
  • 使用 Lodash 将对象键转换为具有键值数量的数组[重复]

    这个问题在这里已经有答案了 我有一个产品对象 products bread 1 milk 2 cheese 2 chicken 1 我想要一个包含产品名称的数组 如下所示 products bread milk milk cheese ch

随机推荐

  • 有没有什么安全的方法可以在客户端保留 SPA 的其余身份验证令牌?

    如果我们从其余服务器获取令牌并在每个授权请求中使用 AuthorizationToken 标头 则当浏览器页面关闭时 我们仍然需要保留它 唯一通用的方法是将令牌放入 cookie 但这样即使cookie不用于身份验证 也可能被XSS窃取 我
  • 如何在 QEMU x86 上模拟 i2c 设备?

    我正在研究 QEMU 1 5 1 6 但还没有看到任何在 i2c 总线上添加设备的文档 有人可以帮忙吗 Thanks 好吧 没人对这个问题感兴趣 我发布我自己的解决方案 由于 QEMU 不支持 I2C 总线级数据传输 因此在将多点触摸数据从
  • Python:如何将所有属性从基类复制到派生类

    我想实现以下目标 usr bin python class SuperHero object def setName self name self name name def getName self return self name cl
  • Java Unicode 翻译

    我遇到了以下代码 public class LinePrinter public static void main String args Note u000A is unicode for Line Feed char c 0x000A
  • 使用 AutoIT 登录 Chrome 身份验证窗口

    我尝试通过以下代码登录到 Firefox 身份验证窗口 WinWaitActive Authentication Required 120 If WinExists Authentication Required Then Send use
  • 如何找到向量中的所有最小元素

    在Matlab中 通过函数min 即使可以有多个相等的最小元素 我也只能得到一个向量的一个最小元素 我想知道如何获取向量中所有最小元素的索引 例如 v 1 1 我想获得索引 1 和 2 它们都索引最小的元素 1 感谢致敬 您可以使用find
  • fmt.Scanln 预期换行错误

    我正在尝试学习 Go 但坚持了这一点 http ideone com hbCamr or http ideone com OvRw7t package main import fmt func main var i int var f fl
  • Github 表示有效的现有工作“正在等待状态报告”

    我有一个 PR 我希望在合并到 master 之前完成某些检查 这是工作https github com hhimanshu typescript serverless api vercel actions runs 763599870 现
  • 美元符号在 Swift / SwiftUI 中起什么作用?

    Apple 提供的有关 SwiftUI 的教程使用美元符号绑定数据 但我无法在 SwiftUI 中找到有关此数据绑定的更多信息 Toggle isOn showFavoritesOnly 您可以使用 前缀来访问对状态变量或其属性之一的绑定
  • 在通过 setTimeout 或 Promise 阻止代码之前更新 DOM

    我知道 当存在 CPU 密集型代码时 任何先前的 DOM 更新都不会发生 例如 function blockFor dur var now new Date getTime while new Date getTime lt now dur
  • 如何使用serviceWorker缓存ajax响应

    我在index html中使用ajax调用服务器数据 它正在完美地获取这些数据 现在 我正在与服务人员一起工作 我可以缓存所有静态资源 图像 js css 并在 Chrome 开发工具的应用程序选项卡的缓存存储中检查这些缓存的资源 我可以在
  • 使用信用卡付款的 Paypal Express Checkout 订阅

    问题 是否可以通过 Paypal api Express Checkout 设置订阅 以便您可以通过信用卡和 Paypal 登录进行支付 Paypal 登录没问题 但目前无法使用信用卡 我已设置 NVP SOLUTIONTYPE Sole
  • 参数数量无效:没有绑定参数

    我有一个使用 php 和 mysql 的静态聊天应用程序 下面是在聊天框中显示消息的代码 sql SELECT id msg time msg from msg to from msg WHERE msg from SESSION user
  • 使用 GSON 反序列化嵌套 JSON 字符串

    全部 我有以下内容JSON输出 字符串 来自 JIRA API 的响应 expand names schema startAt 0 maxResults 50 total 1 issues expand operations version
  • Java:找到大写字母时分割字符串

    我认为这是一个简单的问题 但我无法找到一个简单的解决方案 比如说 少于 10 行代码 我有一个String例如 thisIsMyString 我需要将其转换为String this Is My String 请注意第一个字母不是大写 您可以
  • Visual Studio代码:在输入代码片段时替换字符大小写

    我正在尝试为 Visual Studio Code 和 TypeScript 编写代码片段 到目前为止 我成功地镜像了这样的输入单词 import 1 Name Component from 1 name component 当我在第 1
  • 集群环境下如何使用redis扫描?

    我正在使用 spring redisTemplate 和 redis 扫描 它可以在单节点的情况下查找 但在集群环境下就不行了 我无法获取数据 有没有办法在集群环境下获取扫描数据 这是我的 spring redisTemplate 代码 S
  • 将一个函数作为参数传递给另一个函数

    我看到一个函数像这样传递 sigma 3 e 2 svmTrain X y gaussianKernel X y sigma 这样的函数传递是怎么回事 有人能解释一下吗 语法 X y gaussianKernel X y sigma 创建一
  • Visual Studio:通过电源控制台添加项目文件失败

    我的任务是在一个解决方案中添加 384 个现有项目 以便用项目依赖项替换二进制文件依赖项并使用 msbuild 进行构建 为了实现这一目标 我尝试使用 Visual Studio API 来自动将项目添加到解决方案中 我实际上是 Windo
  • 如何从画布中添加和删除(多个)图像?

    我是画布 HTML5 新手 我必须在画布上设计一个绘画应用程序 有一个功能 例如在画布上动态添加所选图像 通过鼠标移动 以及删除和拖动添加的图像的功能 与文本添加相同 现在我的问题是我们如何从画布中删除图像 注意 添加到画布中的图像没有固定