canvas详解06-合成

简介: canvas详解06-合成

我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外,clip属性允许我们隐藏不想看到的部分图形。这个刮刮乐的案例就需要用到globalCompositeOperation 属性

#globalCompositeOperation

我们不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布中的某些部分(清除区域不仅限于矩形,像clearRect()方法做的那样)以及更多其他操作。

globalCompositeOperation = type

这个属性设定了在画新图形时采用的遮盖策略,其值是一个标识 12 种遮盖方式的字符串。

查看下面Compositing 示例的代码。

目录
相关文章
|
JavaScript Windows
Win7内网安装高版本的Node方法,亲测有效node-v16.16.0
Win7内网安装高版本的Node方法,亲测有效node-v16.16.0
2104 1
|
机器人 jenkins Java
jenkins pipeline流水线集成jacoco,sonar,robot framework,jmeter,fortify
jenkins pipeline流水线集成jacoco,sonar,robot framework,jmeter,fortify
1216 0
jenkins pipeline流水线集成jacoco,sonar,robot framework,jmeter,fortify
|
算法
AntV G6布局机制
AntV G6布局机制
651 0
|
缓存 开发工具 git
【已解决】git pull 显示 Already up-to-date,但文件并没有更新
git pull 显示 Already up-to-date,但文件并没有更新
2076 0
|
8月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
348 57
|
JavaScript
JS移动端设置mouseover,mouseleave有效么
JS移动端设置mouseover,mouseleave有效么
188 1
Pixi入门第二章:绘制各种图形
这篇文章是Pixi.js入门系列的第二章,重点在于如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的代码示例。
229 0
Pixi入门第二章:绘制各种图形
|
缓存 JavaScript 前端开发
使用 RTK Query 的好处:可扩展且高效的解决方案
使用 RTK Query 的好处:可扩展且高效的解决方案
192 1
|
调度 开发者 UED
Kotlin 中的协程是什么?
【8月更文挑战第31天】
1277 1
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
194 0