HTML5 Canvas裁剪clip怎么用

這篇文章主要為大家展示了“HTML5 Canvas裁剪clip怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“HTML5 Canvas裁剪clip怎么用”這篇文章吧。

裁剪（即clip()）是渲染上下文中的繪制方法之一。很多人都以為這是一個清除概念，其實是錯的。雖然從表現上看像清除，但是由于剪切區域由繪圖路徑設定，因此這是一個獨立的顯示區域。

在Canvas動畫中，裁剪區域之外的動畫不受影響，平時在處理圖像時經常會遇到這種需求。與之類似的有一些算法，如臟矩陣算法等。

clip()方法通過計算所有的子路徑來建立新的剪切區域，未閉合的子路徑在填充區按照閉合方式填充，但并不影響實際的子路徑集合，新的剪切區域將替換當前的剪切區域。剪切區域可以是任何可以繪制的輪廓形狀。所以，裁剪路徑其實就是繪圖路徑，只不過這個路徑不是拿來繪圖的，

而是設定顯示區域和遮擋區域的一個分界線。如果你熟悉Flash的話，這有點類似于Flash的遮罩。

下面請看一個例子，代碼如下：

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;">

</canvas>

<script type="text/javascript">

setInterval(function(){

var mycanvas = document.getElementById('mycanvas');

var ctx=mycanvas.getContext('2d');

ctx.fillRect(0,0,500,500); //填充區的大小為500&times;500

ctx.save();

ctx.translate(250,250); //將當前坐標移動到(250, 250)位置上

ctx.beginPath(); //擬定路徑

ctx.arc(0,0,200,0,Math.PI*2,true);//畫出一個半徑為200的圓

ctx.clip(); //裁剪上面的圓

//對裁剪區域進行加樣式處理

var linearGradient = ctx.createLinearGradient(0,-300,0,250);//設定起始點

linearGradient.addColorStop(0, '#FF0000'); //漸變色0

linearGradient.addColorStop(1, '#004080'); //漸變色1

ctx.fillStyle = linearGradient;

ctx.fillRect(-250,0,500,500); //裁剪的重要一步，由于上面已經開始了tanslate，

//因此這里需要調整到-250

for(var j=1;j<250;j++){ //生成的粒子的密度

ctx.save();

ctx.fillStyle = '#FFFF00';

ctx.translate(250-Math.floor(Math.random()*500),

250-Math.floor(Math.random()*500));

drawParticl(ctx,Math.floor(Math.random()*10)); //粒子生成

ctx.restore();

}

ctx.restore();

},100);

function drawPartical(ctx,r){ //畫粒子

ctx.save();

ctx.beginPath()

ctx.moveTo(r,0);

for(var i=0;i<10;i++){

ctx.rotate(Math.PI/Math.random()*20); //旋轉圖形，這是生成圖形的關鍵

ctx.lineTo(r,0);

}

ctx.closePath();

ctx.fill();

ctx.restore();

}

</script>

以上是“HTML5 Canvas裁剪clip怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！