globalCompositeOperation

如果我们先画了一个图形,然后要在这个图形上面再画一个图形,那么这个图形会怎么样呢?是覆盖在原来的图形上面吗?这时候,就要用到globalCompositeOperation这个属性了。

当有两个图形重叠的时候,可以有很多种混合模式,比如上面的图形盖住下面的,或者下面的图形盖住上面的,或者去掉重叠的部分。globalCompositeOperation这个属性就是用来设置混合方式的。这个属性总共有12种值。

因为太多了,我就不一一列举了,大家自己去查。戳这里

我这里就简单介绍其中几种。

source-over

默认值。新的形状会覆盖在原来的形状上。

destination-over

和上面一个属性反过来。

copy

只显示新形状。

这个属性和PhotoShop图层里的混合模式是一样的,也有正片叠底、亮化、差值等等模式。

裁剪

如果你只想在一个圆形区域画图,而圆形区域外的图形都看不见的话,你可以使用clip()裁剪画布。

实际上canvas本身就带有一个canvas一样大的裁剪区域,所以实际上并没有添加裁剪路径,只是裁剪路径被修改了。

使用clip()无需用closePath()闭合路径,clip()本身就会闭合路径。

需要注意的是,当clip()了一个路径以后,无法改变clip()的路径形状,要恢复的话只能用restore()回到原先的状态。

例子

function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75); // Create a circular clipping path
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip(); // draw background
var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778'); ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150); // draw stars
for (var j = 1; j < 50; j++) {
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75 - Math.floor(Math.random() * 150),
75 - Math.floor(Math.random() * 150));
drawStar(ctx, Math.floor(Math.random() * 4) + 2);
ctx.restore();
} } function drawStar(ctx, r) {
ctx.save();
ctx.beginPath();
ctx.moveTo(r, 0);
for (var i = 0; i < 9; i++) {
ctx.rotate(Math.PI / 5);
if (i % 2 === 0) {
ctx.lineTo((r / 0.525731) * 0.200811, 0);
} else {
ctx.lineTo(r, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}

结果

【canvas学习笔记七】混合和裁剪的更多相关文章

  1. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  2. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  3. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  5. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  6. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  7. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  8. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  9. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

随机推荐

  1. HDU 1029 Ignatius and the Princess IV (动态规划、思维)

    Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32767 K ( ...

  2. strtoul()引起的刷卡异常

    )//10个字节 10进制数 { tempcard=strtoul((,);//将 cardnum[]=tempcard>>&0x00ff;//最高位 cardnum[]=temp ...

  3. MySQL -2- 体系结构-多实例模块

    0.在已创建mysql,port=3306的数据库前提下 需要删除/etc/.my.cnf再做以下操作 cp /etc/my.cnf /etc/my.cnf.3306 1.mkdir -p /u02/ ...

  4. Inversions After Shuffle CodeForces - 749E (概率,期望)

    大意: 给定一个$n$排列, 随机选一个区间, 求将区间随机重排后整个序列的逆序对期望. 考虑对区间$[l,r]$重排后逆序对的变化, 显然只有区间[l,r]内部会发生改变 而长为$k$的随机排列期望 ...

  5. IDEA配置远程git仓库

    一,在项目创建本地仓储 2,选择当前文件夹为本地仓储 3, 将代码添加到本地仓库 4,提交到本地仓库 5,提交到本地仓库 配置远程账号和地址 输入你自己的远程仓库----码云或者github,创建的 ...

  6. homebrew学习(三)之homebrew命令

    安装homebrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...

  7. src和href都是链接有啥不一样

    前言 src和href都是用于外部资源的引入,像图片.CSS文件.HTML文件.js文件或其他web页面等.那么在SRC和HREF之间是否有一个明确的区别呢?在哪些地方或者什么时候应该用SRC还是HR ...

  8. phpstudy mysql数据连接不上(#1130)解决办法

    问题:无论输什么密码,都显示#1130,找半天在终于在百度知道找到了,其他帖子都是水贴,暂时不知道为什么要这么加,反正加了重置服务就好了,重新打开phpMyAdmin 输入默认密码root既可 解决办 ...

  9. Electron 5.0 发布

    Electron 5.0的主要变化 打包应用程序现在的行为与默认应用程序相同.将创建一个默认的应用程序菜单(除非应用程序有一个),并且将自动处理全部关闭窗口的事件. (除非应用程序处理事件) 现在默认 ...

  10. 实体类相同属性间赋值与如何判断实体类中是否所有的字段都为null

    1,实体类相同属性间赋值 /// <summary> /// 将实体2的值动态赋值给实体1(名称一样的属性进行赋值) /// </summary> /// <param ...