HTML5 Canvas: 用clip()函数构建裁选区

在HTML5 Canvas中,裁选区(clip region)可用于限制图像描绘的区域。其具体用法为:

  1. 使用rect()函数选择一片矩形区域。
  2. 使用clip()函数将该矩形区域设定为裁选区。

设定裁选区之后,无论在Canvas元素上画什么,只有落在裁选区内的那部分才能得以显示,其余都会被遮蔽掉。以下是一个简单的例子:

绘制两个圆,不使用裁选区

var canvas = document.getElementById("canvasEle");  
var context = canvas.getContext("2d");  
context.lineWidth = 12;  
context.strokeStyle = "red";

context.beginPath();  
context.arc(200, 200, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);  
context.stroke();  
context.closePath();

context.beginPath();  
context.arc(220, 220, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);  
context.stroke();  
context.closePath();  

绘制结果为两个交叉的圆: example-1

绘制两个圆,使用裁选区

可以使用裁选区,仅绘制这两个圆的一部分:

var canvas = document.getElementById("canvasEle");  
var context = canvas.getContext("2d");  
context.lineWidth = 12;  
context.strokeStyle = "red";

context.rect(0,0,200,200);  
context.clip();

context.beginPath();  
context.arc(200, 200, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);  
context.stroke();  
context.closePath();

context.beginPath();  
context.arc(220, 220, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);  
context.stroke();  
context.closePath();  

绘制结果为两个圆均只显示其左上角部分(落在裁选区中的那部分): example-2

取消裁选区

当使用裁选区进行绘画后,可能需要取消该裁选区或者重新定义裁选区。在HTML5 Canvas中,这可以通过调用context的save()函数和restore()函数来实现 — 在构建裁选区之前保存状态,完成裁选区内的绘画后进行状态读取:

var canvas = document.getElementById("canvasEle");  
var context = canvas.getContext("2d");  
context.lineWidth = 12;  
context.strokeStyle = "red";

context.save();

context.rect(0,0,200,200);  
context.clip();

context.beginPath();  
context.arc(200, 200, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);  
context.stroke();  
context.closePath();

context.restore();

context.beginPath();  
context.arc(220, 220, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);  
context.stroke();  
context.closePath();  

在上面的代码中,第一个圆的绘制被局限在裁选区中;因为绘制完第一个圆后裁选区已经取消,因此第二个圆是完全显示的: example-3