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)
网友评论