在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()
};
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() ;
context.globalcompositeoperation屬性值source-over和destination-in來配合使用，檢視globalcompositeoperation屬性介紹
核心**如下：
var render = function() ;運動軌跡動畫
方法一、二都能實現同樣的效果，如果動畫繪製、操作canvas比較頻繁，建議採用第一種方式，用臨時canvas來快取歷史影象，效率更高。
HTML5之Canvas畫圓形
html5之canvas畫圓形 1 設計原始碼 2 設計結果 3 分析說明 1 建立路徑 context.beginpath 2 建立圓形路徑 context.arc 600,300,200,0,math.pi 2,true 第乙個引數x 起點橫座標 第二個引數y 起點縱座標 第三個引數radius...
使用canvas畫圓形（弧形）進度條
效果如下 可以展示整個圓 半圓以及任意角度弧形 左右對稱 的進度條。整體思路如下 完整 如下 關於動畫部分，可以使用requestanimationframe做優化，函式改寫如下 function draw percent,sr if sr math.pi 2 sr 3 2 math.pi var ...
監控滑鼠的位置點選實現圓形擴散動畫
首先看效果圖如下 一 要實現如下的效果我們先分析都要什麼？1 首先我們要先實現這個動畫擴散效果。2 然後當滑鼠點選該標籤時，你需要在他的下面新增乙個標籤並把這個動畫給這個新增標籤。3 其次我們要監控滑鼠的位置。4 在其次找到被點選的標籤的位置與滑鼠點選位置相減就是這個做動畫的標籤的初始位置。5 讓這...