画布中图像上的圆角

2024-02-22

我有一张画布,里面有图像。我希望在图像的两个角上放置圆角。我想这样做的方法是使用全球运营商之一,但我似乎不知道如何做到这一点。

任何帮助,将不胜感激。


不要使用全局运算符,而是计算出您希望图像占据的空间(应该是除圆角之外的矩形路径)

然后在绘制图像之前将此路径放在上下文中,调用 .clip(),然后绘制图像。

然后将在图像的两个角上绘制圆角的图像。

因此,您现在唯一真正的任务是找出实现这一目标所需的路径。

简而言之:

ctx.save();
ctx.beginPath();
// use lineTo and BezierTo here to make the path you want, which is a rectangle the size of the image with two rounded corners.
ctx.closePath();
ctx.clip();

// draw the image
ctx.restore(); // so clipping path won't affect anything else drawn afterwards
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

画布中图像上的圆角 的相关文章

随机推荐

  • XML 属性与元素[重复]

    这个问题在这里已经有答案了 什么时候应该使用 XML 属性以及什么时候应该使用 XML 元素 e g
  • 连接到包含 MS Access Web App 后端的 SQL Azure

    我使用 MS Access 2013 创建了一个简单的 Web 应用程序 它只有一个包含示例数据的表 我将其启动到我的共享点 在我们继续之前 我想告诉您 我正在使用 Office 365 企业版 我们需要管理 Lync SharePoint
  • cherrypy - URL 调度程序 [重复]

    这个问题在这里已经有答案了 可能的重复 在 CherryPy 中使用映射 https stackoverflow com questions 11142625 using mappings in cherrypy 如何将 url 正则表达式
  • 函数的未命名参数可以有默认值吗?

    以下代码在 C 中合法吗 void f void 0 int main f C 标准的哪一页声明这种用法是合法的 是的 这是合法的 没有标准的措辞来具体允许这种功能组合 根本没有任何可以disallow它 要么 默认参数语法适用于 a 中的
  • Java JTable 无法设置列宽

    我尝试设置列的宽度 但它根本不起作用 我一直在寻找答案几个小时 这是我的代码 任何人都可以告诉我问题是什么 提前致谢 String columns Day StratTime EndTime Description mtbl new Def
  • 谷歌测试中数组的比较?

    我正在寻找比较谷歌测试中的两个数组 在 UnitTest 中 这是通过 CHECK ARRAY EQUAL 完成的 你在谷歌测试中是如何做到的 我真的建议看看Google C 模拟框架 https github com google goo
  • 有条件替换两个数据帧 R 中的 NA

    可能是简单但棘手的问题 尤其是对于较大的数据集 给定两个数据帧 df1 df2 具有如下相同尺寸 head df1 a b c 1 0 8569720 0 45839112 NA 2 0 7789126 0 36591578 NA 3 0
  • 使用 Oracle SQL 解析 Json - JSON_TABLE

    我正在尝试使用 JSON TABLE 解析 JSON Oracle 数据库版本 12 1 0 2 Rownum 1 Name John AddressArray Address1 Address2 TextObj mName Carol l
  • Oracle 存储过程 此 SELECT 语句中需要 INTO 子句

    我有一个下面提到的存储过程 create or replace PROCEDURE example in start date IN VARCHAR2 in svc provider IN a message msg service pro
  • matplotlib 获取给定图形包含的所有轴以应用某些设置

    我正在编写一个函数来修改图形上的轴大小和位置 但是当出现双轴时 就会出现问题 import matplotlib pyplot as plt def fig layout fig vspace 0 3 function to make sp
  • 如何在mysql中插入印度泰卢固语字符

    我想将印度语言 泰卢固语 存储在我的数据库表中 但它显示 将泰卢固语数据插入我的表时 我已经验证了如下内容 SHOW VARIABLES LIKE character set system 它显示的输出如下Character set sys
  • 在 Excel 中创建列公式,仅更改一个变量

    我有一个非常基本的 Excel 文件 用于查看股票成本并计算利润 亏损百分比 我在单元格 E3 中有初始购买价格 在 F3 中有当前股价 我通过以下公式计算了 G3 的盈利 亏损百分比 F3 E3 100 100 我现在想要的是 当我在 F
  • 将远程上游添加到 bitbucket 上的 git 存储库

    对于 GitHub 我添加了一个名为upstream使用以下命令获取我的分叉存储库的最新更改 git remote add upstream email protected cdn cgi l email protection
  • 如何在 VBA/VBScript 中执行 onclick 事件

    td class highlightTab style background color red color yellow a class highlightTabLabel href 我仍在尝试通过网页学习 Excel 自动化 我试图使用
  • 错误:无法创建目录 \app\build\intermediates\incremental\packageDebug\zip-cache

    构建工作项目后突然显示错误 如何解决这个错误 错误 无法创建目录 app build intermediates incremental packageDebug zip cache 我尝试了以下解决方案 Delete gradle fro
  • Next.JS:如何在服务器端发出所有请求

    我正在构建一个Next JS https github com zeit next js将从 Python API 和 Postgres 数据库获取数据的应用程序 通常这很简单 但要求是我需要从服务器端而不是用户的客户端发送所有请求 我一直
  • R twitterR 搜索Twitter 地理编码警告/错误

    我正在尝试使用 twitteR 包提取推文 但是当我按照他们在文档中的方式指定地理编码时 在通过 searchTwitter 函数获取推文时遇到问题 请看下面的代码 Oauth code successful authentication
  • Maven:无法安装第 3 方 jar

    尝试将第 3 方 jar 安装到我的存储库 alfresco repository jar 中 我正在使用以下命令 mvn install install file DgroupId alfresco DartifactId alfresc
  • 如何编辑(更新)JSON 文件 flutter 中的数据

    我正在尝试将特定值更新为外部存储中的 JSON 文件 虽然我可以写入该文件 但它正在用单个数据替换整个 JSON 文件 这个是用单个值替换整个文档 Future setBookmark int questionId String isBoo
  • 画布中图像上的圆角

    我有一张画布 里面有图像 我希望在图像的两个角上放置圆角 我想这样做的方法是使用全球运营商之一 但我似乎不知道如何做到这一点 任何帮助 将不胜感激 不要使用全局运算符 而是计算出您希望图像占据的空间 应该是除圆角之外的矩形路径 然后在绘制图