clip 的例子
這個(gè)例子，我會(huì)用一個(gè)圓形的裁切路徑來(lái)限制隨機(jī)星星的繪制區(qū)域。
首先，我畫(huà)了一個(gè)與 canvas 一樣大小的黑色方形作為背景，然后移動(dòng)原點(diǎn)至中心點(diǎn)。然后用 clip 方法創(chuàng)建一個(gè)弧形的裁切路徑。裁切路徑也屬于 canvas 狀態(tài)的一部分，可以被保存起來(lái)。如果我們?cè)趧?chuàng)建新裁切路徑時(shí)想保留原來(lái)的裁切路徑，我們需要做的就是保存一下 canvas 的狀態(tài)。
裁切路徑創(chuàng)建之后所有出現(xiàn)在它里面的東西才會(huì)畫(huà)出來(lái)。在畫(huà)線性漸變時(shí)這個(gè)就更加明顯了。然后在隨機(jī)位置繪制 50 大小不一（經(jīng)過(guò)縮放）的顆，當(dāng)然也只有在裁切路徑里面的星星才會(huì)繪制出來(lái)。
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();
}