摘要：介紹在中看到過這種圓形擴散效果，類似，剛好項目中想把它用上，我又不想引入整個文件，更重要的是想弄明白它的原理，所以自己動手。

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

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

1. 關(guān)鍵技術(shù)點
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(關(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;

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

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

圓形擴散動畫

運動軌跡動畫

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