如何清除画布元素中的多边形区域?

2024-05-24

我使用过clearRect函数,但没有看到多边形的等效函数。我天真地尝试过:

ctx.fillStyle = 'transparent';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

但这只是绘制了一个透明区域,并且不会对已经存在的区域产生影响。有没有办法清除画布元素内部的多边形区域?


您可以使用合成 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation操作设置为'destination-out'为了这:

ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

Example:

试试jsFiddle http://jsfiddle.net/Sykvr/

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

如何清除画布元素中的多边形区域? 的相关文章

  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 为什么我在将数据上传到数据库时不断看到“正在重置断开的连接”?

    我正在通过 REST API 将数亿个项目从 Heroku 上的云服务器上传到 AWS EC2 中的数据库 我正在使用 Python 并且经常在日志中看到以下 INFO 日志消息 requests packages urllib3 conn
  • 日期时间数据注释在 ASP.NET Core RC2 应用程序中不起作用

    如果我向 ViewModel 添加数据注释 则 DateTime 字段的值始终为 1 1 0001 12 00 00 AM 视图模型 public class EditReleaseViewModel BaseViewModel Displ
  • 从一个页面导航到另一个页面时,JavaScript 不会执行

    我正在构建我的第一个 Ruby on Rails 应用程序 并尝试创建一个动画导航栏 我正在使用 jQuery 和 Turbolink 这是我的application js under app assets javascripts docu
  • 将时间值转换为数字,同时保留时间特征

    我有一个数据集 其中包含不同事件发生的间隔时间 我想要做的是将数据转换为数字向量 以便更容易操作和运行摘要 制作图表等 同时保持其时间特征 这是我的数据片段 data lt c 03 31 12 17 16 29 09 52 04 01 0
  • jQuery show() 和 hide() 的更流畅替代方案

    我有一个带有隐藏列的页面设置 使用 jQuery show 和 hide 函数将列滑入和滑出 然而 它有点 笨重 并且在显示 隐藏时看起来不太流畅 相比之下 我还有一个使用 jquery UI 手风琴的页面部分 当在这些部分之间切换时 过渡
  • C 库命名约定

    介绍 大家好 我最近学习了C语言编程 这对我来说是巨大的一步 因为 C 是第一种语言 我接触并害怕了近 10 年 来自主要面向对象的背景 Java C 这是一个非常好的范式转变 我喜欢 C 这是一门非常美丽的语言 最让我惊讶的是C支持的高级
  • Android SIP 客户端 SipManager.open() 未打开

    我一直在使用 Android SDK 的本机 SIP 库编写 SIP 客户端 由于某种原因 我无法让我的帐户在服务器上注册 以下是测试场地 Linux Mint 17 XFCE 运行 Kamailio 服务器 启用 MySQL 和 TLS
  • 为什么分割任务使用 Dice Coefficient 而不是 IOU?

    我见过人们使用IOU作为衡量标准detection任务和Dice Coeff for segmentation任务 这两个指标在方程方面看起来非常相似 只是骰子给予相交部分的权重是两倍 如果我是对的 那么 Dice 2 x A B A B
  • 从 iframe 关闭父弹出窗口

    在domain1 com 上 我有一个链接 可以打开domain2 com 的弹出窗口 弹出窗口中有一个 iframe 也托管在 domain2 com 上 在 iframe 中 我试图关闭弹出窗口 我似乎对如何做到这一点感到困惑 在 if
  • 在表中滚动时,“EXC_BAD_ACCESS”、“-[CFString release]:发送到已释放实例的消息”

    滚动时出现以下错误UITableview EXC BAD ACCESS CFString keep 发送到已释放实例的消息 我怎样才能找到已解除分配的实例 这是我的 noOfRowsinsection 代码 for int i 0 i
  • 保留rootViewController?

    我想知道是否有人可以帮助我解决下面代码中的内存管理问题 我对 rootController 特别感兴趣 当我执行 initWithRootViewController 时它是否会被保留 或者它是否 这是我的猜测 通过窗口 addSubVie
  • 创建简单的 c++.net 包装器。一步步

    我有一个 C 项目 我承认我在c 方面完全是零 但我仍然需要编写一个 c net 包装器 以便我可以使用它来处理非托管 c 库 所以我有什么 1 非托管项目的头文件 2 非托管项目的库 dll 和 lib 3 一个空的 C NET 项目 我
  • 关闭长度未知的通道

    当不了解频道时我无法关闭频道 length package main import fmt time func gen ch chan int var i int for time Sleep time Millisecond 10 ch
  • 电子邮件正文为空,没有 .Display

    我读过这个 VBA Outlook 2010 收到邮件 正文为空 https stackoverflow com questions 42348518 vba outlook 2010 received mail body is empty
  • 仅标头库中的静态成员

    我正在创建仅标头库 并且必须使用静态成员 是否可以在头文件中定义它而不会出现重新定义警告 假设你正在谈论静态data成员 由于静态函数成员没有问题 因此针对不同情况有多种技术 简单积分型 const 地址未占用 在类定义的声明中给它一个值
  • Qt 图表和数据可视化小部件

    我已经安装了 Qt 5 7 来尝试 Qt 图表和 Qt 数据可视化 但我在 Qt Designer 和 Qt Creator 中都找不到新的小部件 有什么建议我应该做什么才能让新的小部件出现在设计器中 我今天遇到了完全相同的问题 默认情况下
  • 如何在返回的 AJAX 调用上使用 django 模板标签?

    我有一个简单的 AJAX 脚本 它在名为的搜索字段中获取输入的字符串AJAXBox并调用一个视图函数 该函数使用过滤器查询数据库并返回与输入参数匹配的所有 User 对象的查询集 当我使用 django 模板标签迭代查询集时 它不起作用 我
  • Chrome 中的 OpenType 设置由字体粗细和字体样式重置

    我在用Raleway https fonts google com specimen Raleway来自 Google Fonts 作为我项目的主要字体 一切都很好 直到我注意到数字以 旧式 模式显示 这意味着某些数字具有从字体基线向上或向
  • 将 REST 服务与 Android 应用程序同步

    我使用一个 REST 服务来填充数据库中的信息 稍后由我的应用程序使用 我已经阅读了有关此事的多个主题 现在必须决定如何在 REST 服务和数据库之间实现同步 想象一个应用程序 它从谷歌金融 API 获取有关股票的信息并将其存储在数据库中
  • 如何清除画布元素中的多边形区域?

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT