arcgis飞行轨迹动画_高德地图，百度地图，arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...

本文转发自热爱前端知识的博客   原博客地址

介绍

在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.beginPath();

context.arc(150, 100, radius, 0, Math.PI * 2);

context.closePath();

context.lineWidth = 2; //线条宽度