在之前的例子里面,我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外, clip属性允许我们隐藏不想看到的部分图形。
globalCompositeOperation
我们不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布中的某些部分(清除区域不仅限于矩形,像clearRect()方法做的那样)以及更多其他操作。
- globalCompositeOperation = type ,这个属性设定了在画新图形时采用的遮盖策略,其值是一个标识12种遮盖方式的字符串:
裁切路径
之前的博客中,介绍了 stroke 和 fill 方法,这里介绍第三个方法clip
- clip() :将当前正在构建的路径转换为当前的裁切路径。
- 默认情况下,canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)。
- 裁切路径的作用是遮罩作用,用来隐藏不需要的部分
- 裁切路径以外的部分不会显示出来,而与裁切图形重叠的的部分才会显示
clip裁切示例:
我们将要绘制一个草原上飘满蒲公英的画面
- 绘制背景
- 平移坐标原点
- 绘制裁切形状
- 绘制背景渐变
- 随机产生蒲公英
- 蒲公英产生函数
- 注意:在这里合理利用translate方法可以便捷的确定图形的位置
window.onload=draw1;
function draw1() {
var ctx = document.getElementById('canvas').getContext('2d');
//ctx.fillStyle="white";
ctx.fillRect(0,0,400,400);
ctx.translate(200,200);
// Create a circular clipping path
ctx.beginPath();
ctx.arc(0,0,200,0,Math.PI*2,true);
ctx.clip();
// draw background
var lingrad = ctx.createLinearGradient(0,-200,0,200);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(1, '#26C000');
ctx.fillStyle = lingrad;
ctx.fillRect(-200,-200,400,400);
// 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));
drawSnowflake(ctx,Math.floor(Math.random()*4)+2);
ctx.restore();
}
}
function drawSnowflake(ctx,r)//蒲公英(本来是要画雪花的,但是太丑了哈哈哈哈,感觉还挺像蒲公英就......)
{
ctx.save();
ctx.beginPath();
ctx.strokeStyle="white";
for(var i=0;i<6;i++)
{
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(r*((i+1)%3+1),0);
ctx.stroke();
ctx.rotate(Math.PI/6);
}
ctx.restore();
}