html5画布中的“擦除”

2024-01-04

我在 html5 canvas 中有一个涂鸦应用程序,我正在尝试找出实现橡皮擦控件的最佳方法。第一个冲动只是让橡皮擦绘制背景颜色[白色],但这是有问题的,因为如果用户将图像或另一层移动到他们之前擦除的位置,他们会在擦除的位置看到白色绘图。

理想情况下,我希望擦除控件将像素更改为黑色透明。我不能简单地使用 lineTo 来执行此操作,因为显然,它只是在其上绘制一条黑色透明线,而原始涂鸦保持不变。关于如何做到这一点有什么想法吗?

谢谢。


如果你想画一个黑色透明的笔画,你可能想要:

context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";

请记住保存之前的 globalCompositeOperation 并稍后恢复,否则透明度将无法正常工作!

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

html5画布中的“擦除” 的相关文章

  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 应用旋转时,HTML5 canvas Clip() 在 Chrome 中不起作用

    我试图在画布上使用剪辑区域 一旦坐标系旋转任何非零值 它就会停止工作 window onload function var canvas document getElementById mainCanvas var ctx canvas g
  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 将 visjs 网络导出为 jpeg/png 图像

    我正在研究 Angular vis js Vis js 在画布上工作 用于创建节点和节点之间的链接 有没有办法从 visj s 画布中获取图像 jpeg png 看看这个片段 我想它会对你有所帮助 在 vis 画布下 您将看到一个 PNG
  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react

随机推荐

  • 如何在更改其内容后使用 Jquery UI 调整 div 的大小?

    我使用 Jquery UI 来允许用户调整带有视频播放器的 div 的大小 这是代码的摘录 div div 当页面呈现时 这将按预期工作 问题是当我触发一个事件来更改 stream div 的内容时
  • UIWebView 不显示我的网页

    对于一些背景信息 我尝试显示的网页是当前托管在 AWS 的 EC2 上的 Web 应用程序 后端是 Python w Flask 前端只是简单的 HTML CSS 该 URL 具有 HTTP 因为它尚未使用 HTTPS 进行保护 当打开该网
  • Spring MVC如何禁止数据绑定到ModelAttribute?

    我有一个简单的 Controller用户登录后呈现页面的类 Controller SessionAttributes user public class DashBoardController RequestMapping value us
  • 在 equals 检查中避免 NullPointerException 的干净方法

    我有一个地址对象 我想为其创建 equals 方法 我可以通过执行类似以下操作 稍微缩短一点 来使这变得非常简单 public boolean equals Object obj if this obj return true if obj
  • NSManagedObject的hasChanges为true,而changedValues为空

    我正在尝试观察个人NSManagedObject变化于NSManagedObjectContextWillSaveNotification void managedObjectContextWillSave NSNotification n
  • 在 VS 2015 和 VS 2013 上运行同一段代码时出现问题

    在 Visual Studio 2013 和 2015 中运行一段代码时 我得到两种不同的结果 在 Visual Studio 2015 上 我得到一个 NullReference 在 2013 年 它按应有的方式工作 Visual Stu
  • 将 JSON NSData 转换为 NSDictionary

    我正在使用 Web 服务的 API 服务 在他们的描述中写道 他们发送 JSON 数据 在我看来 这些数据也与我从中得到的响应相匹配 这是我从 NSURLConnection Delegate connection didReceiveDa
  • 如何创建类的ArrayList?

    如何将一堆类添加到ArrayList
  • 仅使用静态多态性的异构容器

    我的目标是实现一个容器 这里是一组堆栈 每种类型一个 它同时接受许多不同类型的对象 使用 void 指针 或所有存储类型的公共基类 和运行时类型标识 RTTI 在运行时执行此操作非常简单 由于容器将保存的所有类型在编译时都是已知的 因此可能
  • 如何使用 MailApp 在电子邮件中包含内嵌图像

    我有一个简单的 MailApp 来发送 HTML 格式的文本 我的小问题是 如何在该文本中插入内嵌图像 例如 我想为荷兰语文本添加荷兰国旗 为法语内容添加法国国旗 我认为只使用 HTML 代码就可以完成这项工作 但可惜的是 没有这样的运气
  • 更改引荐来源网址的值[重复]

    这个问题在这里已经有答案了 可能的重复 如何在 Javascript 中手动设置 REFERER 标头 https stackoverflow com questions 9580575 how to manually set refere
  • 像工具一样的行为:自定义视图中的文本?

    我有一个自定义视图 布局中有两个文本视图 我们来叫一个key和另一个value 所以你知道怎么做TextView有这个吗
  • 如何从 Minecraft 编辑 .mca 文件?

    介绍 我想将我的各个 Minecraft 世界合并成一个世界 这似乎是一个相对容易的壮举 但随着我的研究 它演变成需要制作一个自定义程序 奋斗 我首先移动区域文件并将它们合并到一个区域文件夹中 这似乎是显而易见的解决方案 而且几乎有效 注意
  • 如何在Plone 5上自定义folder_contents?

    我在 Plone 5 上 我想修改默认显示的列数 folder contents 如果我没记错的话 整个table是一种在相应标签上使用相当大的 JSON data xxx 参数进行初始化的模式 那么 我应该深入研究 JSON 还是将注意力
  • 使用 jQuery 绘制动画线条

    我想使用 jQuery 来创建就像用隐形笔绘制线条图的效果 有点像这样 http d2fhka9tf2vaj2 cloudfront net tuts 152 QTiPad Milestones JavaScriptWebsite html
  • 如何修复 facebook Messenger-checkbox 的 CSP 问题

    我正在努力使Facebook Messenger 复选框 https developers facebook com docs messenger platform plugin reference checkbox plugin工作 我已
  • SKLabelNode没有透明背景

    您好 我在 SKLabelNode 上使用自定义字体 我可以设置字体颜色 但是还可以 但是文本的内部部分是透明的 例如 有什么方法可以将这种颜色设置为白色吗 到目前为止我的代码 scoreLabel fontColor SKColor co
  • 发布集合和 ModelState

    我的 MVC 应用程序中有一个问题 我不确定如何解决 或者我是否以错误的方式解决它 我有一个控制器 视图 它在带有复选框的网格中显示项目列表 当这些项目发布到我的控制器时 我想根据传入的 id 从数据库中删除行 该视图看起来像这样 for
  • 强制 IE9 使用浏览器模式而不是兼容模式

    我在用 in head标签 但是 当我在 IE9 上运行我的应用程序时 它使用浏览器模式 IE 9 紧凑视图 我希望我的应用程序仅使用浏览器模式 IE9 not 兼容视图 我意识到我在这方面有点晚了 但这是我使用过的并且它对我有用 确保这是
  • html5画布中的“擦除”

    我在 html5 canvas 中有一个涂鸦应用程序 我正在尝试找出实现橡皮擦控件的最佳方法 第一个冲动只是让橡皮擦绘制背景颜色 白色 但这是有问题的 因为如果用户将图像或另一层移动到他们之前擦除的位置 他们会在擦除的位置看到白色绘图 理想