canvas详解07-裁剪

简介: canvas详解07-裁剪

裁切路径

裁切路径和普通的 canvas 图形差不多,不同的是它的作用是遮罩,用来隐藏不需要的部分。如右图所示。红边五角星就是裁切路径,所有在路径以外的部分都不会在 canvas 上绘制出来。

如果和上面介绍的 globalCompositeOperation 属性作一比较,它可以实现与 source-in 和 source-atop差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西,而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

在 绘制图形 一章中,我只介绍了 stroke 和 fill 方法,这里介绍第三个方法clip。

clip()

将当前正在构建的路径转换为当前的裁剪路径。

我们使用 clip()方法来创建一个新的裁切路径。

默认情况下,canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)。

#clip的例子

这个例子,我会用一个圆形的裁切路径来限制随机星星的绘制区域。

function draw() {
  var ctx = document.getElementById('canvas').getContext
目录
相关文章
|
11月前
|
前端开发 JavaScript 测试技术
函数柯里化的应用场景
函数柯里化在编程中广泛应用,如参数复用、提前返回部分计算结果、提高代码可读性和模块化程度。常见于函数式编程语言,也可在JavaScript等语言中实现,简化复杂操作。
|
3月前
|
人工智能 JavaScript 前端开发
分享开源库:AI驱动的JavaScript反编译,针对混淆和压缩的代码
这是一个智能JavaScript反混淆与代码分析工具,通过AST转换和AI深度分析,自动还原变量名、识别依赖库、生成可视化控制流图,并支持多格式导出,提升代码理解与审计效率。访问 [jsunpack.tech](https://www.jsunpack.tech/) 即可在线体验。
537 0
|
SQL 数据库 开发者
SQL 语言:完整性约束
SQL 语言:完整性约束
404 3
|
JavaScript
js计算时间差,包括计算,天,时,分,秒
js计算时间差,包括计算,天,时,分,秒
952 16
|
存储 前端开发 Java
JavaWeb基础7——会话技术Cookie&Session
会话技术、Cookie的发送和获取、存活时间、Session钝化与活化、销毁、用户登录注册“记住我”和“验证码”案例
JavaWeb基础7——会话技术Cookie&Session
|
JavaScript 算法 数据安全/隐私保护
JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
1165 0
JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
1192 0
|
存储 关系型数据库 Serverless
Ganos三维引擎系列(二):可视域与阴影率分析
本文介绍了基于阿里云多模态时空数据库Ganos三维引擎构建可视域分析与阴影率分析的应用方法。Ganos三维引擎支持三大类存储结构:表面网格模型、体网格模型与3D实景模型,其中表面网格模型用于存储带有语义的类BIM的精细化三维模型,体网格模型用于存储地质体等非匀质“场”类三维模型,3D实景模型用于存储倾斜摄影、精白模等用于渲染的三维模型,三种存储结构都提供了原生数据类型、空间索引、分析算子、导入导出工具、可视化支撑等功能,为数字孪生类应用提供闭环的存算显能力。
|
存储 关系型数据库 MySQL
【深入了解Nacos集群和持久化配置】 ——每天一点小知识
【深入了解Nacos集群和持久化配置】 ——每天一点小知识
793 0
|
JSON 资源调度 负载均衡
这可能是你见过最全的Node.js应用程序管理与部署:使用PM2进行进程管理
node是单线程应用,单线程最大的弊端就是无法利用多核CPU带来的优势来提升运行效率。 pm2(process manager)是一个进程管理工具,可以用它来管理node进程,负责所有的node进程,并查看node进程的状态,也支持性能监控,负载均衡等功能。
1164 0
这可能是你见过最全的Node.js应用程序管理与部署:使用PM2进行进程管理