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-overdestination-in來配合使用,檢視globalcompositeoperation屬性介紹

核心**如下:

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

運動軌跡動畫

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