本文轉(zhuǎn)發(fā)自熱愛前端知識的博客? ?原博客地址

介紹

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

實現(xiàn)原理

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

實現(xiàn)方法一

1. 關(guān)鍵技術(shù)點

context.globalAlpha = 0.95; //設(shè)置主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上的歷史圖像，設(shè)置主canvas的透明度context.globalAlpha=0.95(關(guān)鍵一步)，在每次調(diào)用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;

//設(shè)置主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);

};

實現(xiàn)方法二

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

核心代碼如下：

var render = function() {

//默認(rèn)值為source-over

var prev = context.globalCompositeOperation;

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

context.globalCompositeOperation = 'destination-in';

//設(shè)置主canvas的繪制透明度

context.globalAlpha = 0.95;

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

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

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

context.globalCompositeOperation = prev;

//在主canvas上畫新圓

drawCircle();

};

地圖上的應(yīng)用

這里我采用的是第二種方式，將擴(kuò)散、漸變效果運用到了百度地圖上，感覺還比較炫，查看更多demo

圓形擴(kuò)散動畫

運動軌跡動畫

總結(jié)

方法一、二都能實現(xiàn)同樣的效果，如果動畫繪制、操作canvas比較頻繁，建議采用第一種方式，用臨時canvas來緩存歷史圖像，效率更高。

總結(jié)

以上是生活随笔為你收集整理的arcgis飞行轨迹动画_高德地图，百度地图，arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。