美文网首页全栈记
2 HTML5 canvas、echarts/hcharts可视

2 HTML5 canvas、echarts/hcharts可视

作者: 官清岁月 | 来源:发表于2019-05-10 18:29 被阅读0次

    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)

    相关文章

      网友评论

        本文标题:2 HTML5 canvas、echarts/hcharts可视

        本文链接:https://www.haomeiwen.com/subject/fblahqtx.html