參考文章：
https://blog.csdn.net/gdp12315_gu/article/details/53575556
https://github.com/chengquan223/map-canvas/tree/master/examples
canvas事件
https://bz5811.iteye.com/blog/1908172
canvas動畫
https://segmentfault.com/a/1190000004852668
canvas library
canvas雙緩存 ；
設置globalAlpha，臨時canvas保存上一步主canvas數據，臨時canvas數據復制到主canvas時，透明度會下降，相當於把主canvas上一步數據透明度調低。上一步（透明度調低）、下一步數據疊加在一起形成運動效果。
Path2D:
<body>
<canvas id="canvas"></canvas>
<div id="result"></div>
</body>
var div = document.getElementById("result");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var path1 = new Path2D();
path1.rect(10, 10, 100, 100);
path1.closePath();
ctx.stroke(path1);
var path2 = new Path2D();
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
path2.closePath();
ctx.stroke(path2);
var path3 = new Path2D("M230 10 h 80 v 80 h -80 Z");
ctx.fill(path3);
path3.closePath();
$('canvas').click( function(event)
{
div.innerHTML = "";
var x = event.pageX;
var y = event.pageY;
if (ctx.isPointInPath(path1, x, y))
div.innerHTML = "Path1 clicked";
if (ctx.isPointInPath(path2, x, y))
div.innerHTML = "Path2 clicked";
if (ctx.isPointInPath(path3, x, y))
div.innerHTML = "Path3 clicked";
});