2 HTML5 canvas、echarts/hcharts可视化工具

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';

11种值

(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/  ->不是很流行 ~

直接引入js即可(其没有依赖其它库，也不用引入css)