canvas反向裁剪技巧

我们都知道在canvas 可以通过clip来实现剪裁功能,其步骤一般是先设置要裁剪的区域(路径),然后通过ctx.clip()的实现裁剪,裁剪之后,后续的绘制只能在裁剪的区域显示效果,比如如下一段代码,实现了一个圆形裁剪:

ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2);
ctx.clip();ctx.rect(0,0,200,200);
ctx.fillStyle='red';
ctx.fill();

最终效果如下:
裁剪

有的时候,我们希望能够实现反向裁剪,比如上面例子中,我们希望是圆圈外面是裁剪区域,而不是圆圈内部是裁剪区域。这就是标题所说的反向裁剪。效果如下图所示:
反向裁剪
如何实现反向裁剪呢?
笔者通过实践,发现有以下几种思路。

使用合成模式globalCompositeOperation

通过设置globalCompositeOperation的值,可以实现类似的反向裁剪的效果。大致思路是:

  • 首先绘制一个图形(比如圆形),该图形外部的区域将会是裁剪区域
  • 设置globalCompositeOperation的值为source-out
  • 然后绘制想要绘制的图形(比如矩形)

示例代码如下:

 ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();ctx.beginPath();
ctx.globalCompositeOperation = 'source-out';
ctx.rect(0, 0, 200, 200);
ctx.fillStyle = 'red';
ctx.fill();

最终效果参考上面的图形“反向裁剪”。

使用clip + clearRect方法

另外一种思路是使用clip + clearRect方法,大概的思路如下:

  • 首先绘制要绘制的图形(比如矩形)
  • 然后设置要反向裁剪的图形的路径(比如圆形)
  • 然后调用clip ,再调用clearRect方法清除圆形区域的像素。

示例代码如下:

   ctx.beginPath();ctx.rect(0, 0, 200, 200);ctx.fillStyle = 'red';ctx.fill();ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2);ctx.clip();ctx.clearRect(0, 0, 200, 200);

最终效果参考上面的图形“反向裁剪”。

利用非零环绕原则

我们知道非零环绕原则,可以通过调整路径的方向(顺时针和逆时针),来实现挖空的效果,大致思路如下:

  • 首先构建一个大的区域路径(顺时针方向),比如矩形
  • 然后构建一个小的区域路径(逆时针方向),比如圆形
  • 调用clip裁剪,然后绘制图形

示例代码如下:

ctx.beginPath();
ctx.rect(0, 0, 200, 200); //顺时针方向
ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 逆时针方向
ctx.clip();ctx.beginPath();
ctx.rect(0, 0, 200, 200);
ctx.fillStyle = 'red';
ctx.fill();

arc方法的最后一个参数可以控制顺时针(false)和逆时针(true),而rect方法没有,可以通过moveTo,lineTo,自己构建逆时针的rect方法,如下代码所示:

function counterclockwiseRect(ctx, x, y, w, h) {ctx.moveTo(x, y);ctx.lineTo(x, y + h);ctx.lineTo(x + w, y + h);ctx.lineTo(x + w, y);ctx.lineTo(x, y);
}

最终效果参考上面的图形“反向裁剪”。

参考文档

https://stackoverflow.com/que...
https://stackoverflow.com/que...
http://caibaojian.com/canvas/...(非零环绕原则 )

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript、Python语言,熟悉数据库。熟悉java、nodejs应用系统架构,大数据高并发、高可用、分布式架构。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。
ITman彪叔公众号

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/449457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

set 和select 的区别

简单赋值是没有区别的 转载于:https://www.cnblogs.com/bingyizhihun/p/10597908.html

马上有钱:揭密25种成为有钱人的方法(图)

1、做你真正感兴趣的事—你会花很多时间在上面,因此你一定要感兴趣才行,如果不是这样的话,你不愿意把时间花在上面,就得不到成功。 2、自己当老板。为别人打工,你绝不会变成巨富,老板一心一意地缩减开支&a…

无人承运平台系统流程图

转载于:https://www.cnblogs.com/procedureMonkey/p/10598052.html

年买笔记本的8个小技巧 最适合自己才最好(组图)

显然,智能手机和平板在一定程度上可以替代传统电脑,让我们可以随时随地上网、使用各种应用。不过,传统电脑也拥有它的不可替代性,比如移动办公、视频编辑、玩游戏,笔记本电脑可能是个更好的选择。 作为一种成熟的电脑…

基本变量和引用变量

基本数据类型作比较,值相等则相等,值不相等则不相等(忽略数据类型) 引用类型作比较,引用地址相等则相等,否则都是不等的。 基本数据类型,和引用数据类型作比较,是比较值是否相等&…

[云框架]KONG API Gateway v1.5 -框架说明、快速部署、插件开发

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 当前版本采用KONGv0.12.3 当我们决定对应用进行微服务改造时,应用客户端如何与微服务交互的问题也随之而来,毕竟…

python 游戏 —— 汉诺塔(Hanoita)

一、汉诺塔问题 1. 问题来源 问题源于印度的一个古老传说,大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上。并且规定,在小圆…

error: failed to push some refs to 'https://gitee.com/xxx/xxx'

一开始以为是本地版本和线上的差异 果断先直接pull 之后 还是不对,哎 不瞎搞了 搜... 获得消息: git pull --rebase origin master 原来如此:是缺失了文件 转载于:https://www.cnblogs.com/G921123/p/10605956.html

DevOps团队结构类型汇总:总有一款适合你

前言 组织中任何DevOps工作的主要目标都是改进客户和业务的价值交付,而不是降低成本、提升自动化或者通过配置管理驱动一切;这意味着,为了实现有效的Dev和Ops协同,不同的组织可能需要不同的团队结构。 概述 具体哪种DevOps团队结构…

magic

转载于:https://www.cnblogs.com/P201821430028/p/10611080.html

Vue 后台管理

这里是结合vue和element快速成型的一个demo 里面展示了基本的后台管理界面的大体结构和element的基本操作 GitHub的地址:https://github.com/wwwming/adminDemo 转载于:https://www.cnblogs.com/wangming1002/p/10613014.html

Linux查看MySQL版本的四种方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1 在终端下执行 mysql -V 2 在help中查找 mysql --help |grep Distrib 3 在mysql 里查看 select version() 4 在mysql 里查看 status…

行业指数动量策略+akshare

以周为单位,获取本周最强的5只行业指数,进行均值购买。 数据源采用akshare。 导入包 import akshare as ak import pandas as pd import numpy as np import matplotlib 日线换为周线 #日线换为周线数据 def transferToWeekLine(df):data1dfstock_da…

2019-03-28 SQL Server Pivot

--现在我们是用PIVOT函数将列[WEEK]的行值转换为列,并使用聚合函数Count(TotalPrice)来统计每一个Week列在转换前有多少行数据,语句如下所示 select * from ShoppingCart as C PIVOT(count(TotalPrice) FOR [Week] IN([1],[2],[3],[4],[5],[6],[7])) AS…

C/C++开发者必不可少的15款编译器+IDE

摘要:C/C这两门语言依然活跃在编程领域里,其不仅拥有强大的功能集,而且还提供了强大的安全保障。为此,笔者专为C/C编码者收集了15款令人印象深刻的IDE和编译器。 Web开发者可选择的编程语言有很多比如,Java、.Net、PH…

白山云科技 CTO 童剑:空降后,如何有技术又有艺术地破局?

TGO 鲲鹏会北京分会举行了一场线下分享活动——《 CTO 空降如何平稳落地 》,白山云科技(下称“白山”)CTO 童剑分享了他的故事和经验。在工作中,“空降”这个问题不仅仅是 CTO 会遇到,每一个带团队的领导都会遇到。如何…

如何理解指向指针的指针?

本文由 伯乐在线 - 菜鸟浮出水 翻译自 StackOverflow。欢迎加入 技术翻译小组。转载请参见文章末尾处的要求。问题:如何理解指向指针的指针? 我在一篇教程中看到下面这段,它描述指向指针的指针是如何运作的。 引用文章相关段落如下&#x…

Linux定时任务Crontab命令详解

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 linux 系统则是由 cron (crond) 这个系统服务来控制的。Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认…

中小企业网络安全提升

为什么80%的码农都做不了架构师?>>> 据外媒报道,绝大多数网络罪犯的目标是中小企业,然而研究表明,大多数企业主并不认为自己有成为网络犯罪分子目标的可能。为了保护自己不受网络攻击,企业应该关注以下五个…

用Linux命令行生成随机密码的十种方法

本文由 极客范 - 小道空空 翻译自 Lowell Heddings。欢迎加入极客翻译小组,同我们一道翻译与分享。转载请参见文章末尾处的要求。Linux操作系统的一大优点是对于同样一件事情,你可以使用高达数百种方法来实现它。例如,你可以通过数十种方法…