html5 canvas 笔记五(合成与裁剪)

时间:2023-12-21 21:49:32

组合 Compositing

globalCompositeOperation

syntax:


globalCompositeOperation = type

注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”。

source-over  这是默认设置,新图形会覆盖在原有内容之上。

html5 canvas 笔记五(合成与裁剪)

destination-over  会在原有内容之下绘制新图形。

html5 canvas 笔记五(合成与裁剪)

source-in  新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。

html5 canvas 笔记五(合成与裁剪)

destination-in  原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的。

html5 canvas 笔记五(合成与裁剪)

source-out  结果是只有新图形中与原有内容不重叠的部分会被绘制出来。

html5 canvas 笔记五(合成与裁剪)

destination-out  原有内容中与新图形不重叠的部分会被保留。

html5 canvas 笔记五(合成与裁剪)

source-atop  新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上。

html5 canvas 笔记五(合成与裁剪)

destination-atop  原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形

html5 canvas 笔记五(合成与裁剪)

lighter  两图形中重叠部分作加色处理。

html5 canvas 笔记五(合成与裁剪)

darker  两图形中重叠的部分作减色处理。

html5 canvas 笔记五(合成与裁剪)

xor  重叠的部分会变成透明。

html5 canvas 笔记五(合成与裁剪)

copy  只有新图形会被保留,其它都被清除掉。

html5 canvas 笔记五(合成与裁剪)

裁切路径 Clipping paths

裁切路径和普通的 canvas 图形差不多,不同的是它的作用是遮罩,用来隐藏没有遮罩的部分。

syntax


clip()

实例:

 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();
}