动画效果之 Canvas学习-globalCompositeOperation详解

本节介绍一下globalCompositeOperation，以的形式说明每个属性。
globalCompositeOperation与cilp（）的区别：
globalCompositeOperation用于控制源图像在目标图像上的显示方式。

源图像: 指你准备绘制到画布上的图像
目标图像：在画布上已经绘制的图像

clip() 方法从原始画布中剪切任意形状和尺寸。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

图像合成globalCompositeOperation类型

在Canvas中globalCompositeOperation属性的值总共有26种类型，每种类型都将前生不一样的效果，当然你可能看到效果都将不样，甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧，我们简单的了解这26种类型其代表的含意以及产生的效果。
今天我们就来了解Canvas中的图像合成怎么使用。

蓝色区域为旧图形（目标图像），红色为新图形（源图像）
值	描述	值	描述
source-over 预设值。将新图形放在旧图形之上。		destination-over 将新图形放在旧图形之下。
source-in 只保留新、旧图片重叠的新圆形区域，其余透明。		destination-in 只保留新、旧图片重叠的新圆形区域，其余透明。
source-out 只保留新、旧图像的非重叠的新圆形区域，其余为透明。		destination-out 只保留新、旧图像的非重叠的旧圆形区域，其余为透明。
source-atop 新圆形只在绘制新、旧图像重叠的新圆形区域，然后盖在旧图形之上		destination-atop 旧图形只保留在新、旧图形重叠的旧圆形区域，然后盖在新圆形之上。
lighter 新旧图像重叠区域的颜色，有新、旧图像的颜色吗相加而得		xor 新旧图像重叠区域设为透明
copy 移除其他图像，只保留新图形

动画效果之 Canvas学习-globalCompositeOperation详解相关推荐

php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
java canvas详解_HTML5的canvas绘图技术详解
原标题:HTML5的canvas绘图技术详解本篇教程探讨了HTML5的canvas绘图技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < canvas ...
自定义View之Canvas(画布)的详解
接下来学习一下自定义View之Canvas(画布)的详解先来看看Canvas常用方法: 功能分类 Canvas常用方法备注绘制颜色 drawARGB 通过设置ARGB值绘制颜色 drawRGB ...
深度学习优化函数详解（5）-- Nesterov accelerated gradient (NAG) 优化算法
深度学习优化函数详解系列目录深度学习优化函数详解(0)– 线性回归问题深度学习优化函数详解(1)– Gradient Descent 梯度下降法深度学习优化函数详解(2)– SGD 随机梯度下降 ...
canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
【深度学习】详解Resampling和softmax模型集成
[深度学习]详解Resampling和softmax模型集成文章目录 1 图像重采样1.1 次级采样(sub-sampling)1.2 高斯金字塔(Gaussian pyramids)1.3 上采样 ...
Java JUC学习 - ConcurrentLinkedDeque 详解
Java JUC学习 - ConcurrentLinkedDeque 详解 0x00 前言如何实现并发程序,对于Java以及其他高级语言来说都是一件并不容易的事情.在大一上学期的时候,我们学习了链表 ...
php add action,WordPress学习——add_action()详解
add_action() 是 WordPress 核心代码执行期间或特定事件发生时启动的钩子函数. 插件可以指定使用 Action API 在这些特定点上执行其一个或多个PHP函数.简单来说就是通过 ...
如何用PPT来实现三维3D效果，附参数设置详解
原文链接: 如何用PPT来实现三维3D效果,附参数设置详解

动画效果之 Canvas学习-globalCompositeOperation详解

图像合成globalCompositeOperation类型

动画效果之 Canvas学习-globalCompositeOperation详解相关推荐

最新文章

热门文章