canvas動畫 圓形擴散 運動軌跡

2022-08-05 16:09:12 字數 1529 閱讀 8640

在echarts中看到過這種圓形擴散效果，類似css3，剛好專案中想把它用上，but我又不想引入整個echart.js檔案，更重要的是想弄明白它的原理，所以自己動手。在這篇文章中我們就來分析實現這種效果的兩種方法，先上效果圖：

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

1. 關鍵技術點

context.globalalpha = 0.95; //設定主canvas的繪製透明度。

建立臨時canvas來快取主canas的歷史影象，再疊加到主canvas上。

2. 繪製過程

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

//畫圓


var drawcircle = function() 


};
然後，我們建立一個臨時canvas用來快取主canvas上的歷史影象，設定主canvas的透明度context.globalalpha=0.95(關鍵一步)，在每次呼叫drawcircle方法繪製一個新圓之前都把主canvas上的影象，也就是之前的影象給繪製到臨時的canvas中，等到drawcircle方法繪製完新圓後，再把臨時canvas的影象繪製回主canvas中。

核心**如下：

//建立一個臨時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() ;
與上一種方法相比，這種方法更加簡單，同樣是用到了透明度逐漸減小直到為0的原理，不同的是這裡並沒有建立臨時canvas，而是運用了context.globalcompositeoperation屬性值source-over和destination-in來配合使用，檢視globalcompositeoperation屬性介紹

核心**如下：

var render = function() ;
圓形擴散動畫

運動軌跡動畫

方法一、二都能實現同樣的效果，如果動畫繪製、操作canvas比較頻繁，建議採用第一種方式，用臨時canvas來快取歷史影象，效率更高。