html5如何實現圓圈擴散效果

今天小編給大家分享一下html5如何實現圓圈擴散效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　實現原理

　　通過不斷的改變圓的半徑大小，不斷重疊達到運動的效果，在運動的過程中，設置當前canvas的透明度 context.globalAlpha=0.95 ，使得canvas上的圓逐漸透明直至為0，從而實現這種擴散、漸變的效果。

　　實現方法一

　　1. 關鍵技術點

　　context.globalAlpha = 0.95 ; //設置主canvas的繪制透明度。

　　創(chuàng)建臨時canvas來緩存主canas的歷史圖像，再疊加到主canvas上。

　　2. 繪制過程

　　首先，我們先來寫一個繪制圓的方法：

　　//畫圓

　　var drawCircle = function() {

　　context.beginPath();

　　context.arc(150, 100, radius, 0, Math.PI * 2);

　　context.closePath();

　　context.lineWidth = 2; //線條寬度

　　context.strokeStyle = 'rgba(250,250,50,1)'; //顏色

　　context.stroke();

　　radius += 0.5; //每一幀半徑增加0.5

　　//半徑radius大于30時，重置為0

　　if (radius > 30) {

　　radius = 0;

　　}

　　};

　　然后，我們創(chuàng)建一個臨時canvas用來緩存主canvas上的歷史圖像，設置主canvas的透明度 context.globalAlpha=0.95 (關鍵一步)，在每次調用 drawCircle 方法繪制一個新圓之前都把主canvas上的圖像，也就是之前的圖像給繪制到臨時的canvas中，等 drawCircle 方法繪制完新圓后，再把臨時canvas的圖像繪制回主canvas中。

　　核心代碼如下：

　　//創(chuàng)建一個臨時canvas來緩存主canvas的歷史圖像

　　var backCanvas = document.createElement('canvas'),

　　backCtx = backCanvas.getContext('2d');

　　backCanvas.width = width;

　　backCanvas.height = height;

　　//設置主canvas的繪制透明度

　　context.globalAlpha = 0.95;

　　//顯示即將繪制的圖像，忽略臨時canvas中已存在的圖像

　　backCtx.globalCompositeOperation = 'copy';

　　var render = function() {

　　//1.先將主canvas的圖像緩存到臨時canvas中

　　backCtx.drawImage(canvas, 0, 0, width, height);

　　//2.清除主canvas上的圖像

　　context.clearRect(0, 0, width, height);

　　//3.在主canvas上畫新圓

　　drawCircle();

　　//4.等新圓畫完后，再把臨時canvas的圖像繪制回主canvas中

　　context.drawImage(backCanvas, 0, 0, width, height);

　　};

　　實現方法二

　　與上一種方法相比，這種方法更加簡單，同樣是用到了透明度逐漸減小直到為0的原理，不同的是這里并沒有創(chuàng)建臨時canvas，而是運用了 context.globalCompositeOperation 屬性值 source-over 和 destination-in 來配合使用， 查看globalCompositeOperation屬性介紹

　　核心代碼如下：

　　var render = function() {

　　//默認值為source-over

　　var prev = context.globalCompositeOperation;

　　//只顯示canvas上原圖像的重疊部分

　　context.globalCompositeOperation = 'destination-in';

　　//設置主canvas的繪制透明度

　　context.globalAlpha = 0.95;

　　//這一步目的是將canvas上的圖像變的透明

　　context.fillRect(0, 0, width, height);

　　//在原圖像上重疊新圖像

　　context.globalCompositeOperation = prev;

　　//在主canvas上畫新圓

　　drawCircle();

　　};

以上就是“html5如何實現圓圈擴散效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。