1、canvas ->全部使用js脚本操作实现，最早出现在safari,IE9之前不兼容
(1).应用场景：游戏、图表、动画； 图表Echarts：https://echarts.baidu.com/ 动画：https://codepen.io/
(2).canvas聚焦点：获取canvas元素 -> 创建画笔对象 ->系列方法/属性的操作oCanvas.getContext(‘2d’) ->返回CanvasRenderingContext2D对象;//二维绘图API，未来可能扩展到3d-> oCanvas.getContext('3d');
[1].ctx.moveTo();/lineTo();/stroke();/lineWidth;strokeStyle;/closePath();/beginPath();/fill();/fillStyle
[2].每次重新使用ctx.moveTo();ctx.lineWidth;不会覆盖,ctx.storkeStyle会覆盖，所以建议每次"画线"结束后，使用ctx.beginPath();另起路径
(3).绘制三角形、矩形、弧形、圆角、贝塞尔曲线
(4).关于坐标轴 -> ctx.translate(); ctx.scale(); ctx.rotate();
save();//其可保存元素当前状态，并不只是保存坐标轴状态；
(5).填充图案 -> ctx.createLinearGradient(x1,y1,x2,y2); ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
(6).盒子/文字阴影，线段样式
(7).裁剪 -> ctx.clip();ctx.globalCompositeOperation = 'source-over';
(8).绘制图片
(9).命中检测 -> 应用场景：canvas游戏中“是否命中目标”
3、解决canvas高分屏模糊问题：
canvas绘制的是位图(其是由像素点构成)，在分辨率较高的屏幕，例如iphone6/6s/mac等机器上，其会变模糊；解决方法 -> 根据屏幕分辨率修改canvas样式代码中的宽/高与canvas的width和height属性的比例；
4、echarts: http: //echarts.baidu.com/; hcharts: https://www.hcharts.cn/ ->底层原理：canvas实现 D3: https://d3js.org/ ->不是很流行 ~
