这是我参与「第五届青训营」伴学笔记活动的第 4 天。
基本概念相关问题
- 矢量渲染是什么意思？
- canvas 生成位图，位图和矢量渲染之间的关系？
- canvas 将矢量作为矢量渲染？
SVG
- SVG 的响应式变化能力是依靠什么实现的？
- SVG 或 WebGL 的渲染机制相比 Canvas 的基于帧绘制有什么不同吗？
Canvas
- canvas 图表添加过渡动画？
- createPattern 的常见应用场景是什么？
- canvas 是浏览器专属的工具吗？
- canvas 移动端绘制模糊问题
- pattern印章填充样式单体图标颜色控制？
- canvas 渲染流程是怎么样的？
- HTML5 Canvas 瓦片矢量地图引擎？
- canvas 绘制透明线框？
- canvas 中一元素的任何子元素，指什么，什么样的才算子元素？文字算吗？
- canvas 中元素如何移动平滑？
- canvas 自带 isPointIn 方法是否足够高效？需要利用其他算法替换吗？
- canvas 对 GIS 绘制技术带来的改变与加强很大吗？
- canvas 的矢量渲染性能？canvas 本质是动态生成一个位图（图像），位图和矢量渲染有关系吗？
- canvas 的 scale 画布缩放放大，是基于什么实现的？然后怎么实现？
- canvas 如何实现画布的展示角度变换？2D 转 3D。
- canvas 绘制中的 translate() 与 restore() 方法的意思？
- 一款 web 端聊天软件，在其聊天界面的绘制选型上，选择canvas怎么样？canvas 和浏览器 DOM 元素绘制谁优谁劣，如何选择？
- 人们对浏览器 DOM 想了许多避免直接操作、重排重绘的优化措施，canvas 基于帧渲染，常规上每次都会清除画布并重新渲染，但这样似乎很低效，有人对此做过一些优化吗？或者 canvas 是否不需要这种程度的优化？
- canvas 有无类似 WebGL 的实例化技术，【一次绘制大量物体的技术】，这种技术好像可以类比于浏览器的排版引擎？好像没有。
- canvas 如何实现 SVG 技术的 scalable 以及矢量图形特性带来的优点？
Canvas 中属性的一些应用场景
- 绘制图片轮廓：globalCompositeOperation 属性。
- 画笔轨迹圆滑：属性
WebGL
- 苹果 m1 芯片能调用 WebGL 吗？
- webgl 如何实现地图展示？
- webgl 基础内容上手难度？
- 在 2D 内容绘制上，webgl 在可视化数据分析上的用武之地？
- webgl 如何封装出一个简单的 threejs？
- WebGL 的版本进化带来的新特性？有哪些新特性值得关注？
SVG 与 Canvas 相关
- 使用 svg（d3） 和使用 canvas（echarts等） 做数据可视化，怎么权衡？
- d3 有哪些图表使用 canvas 技术绘制完成，选择 canvas 的原因是什么？
- 2D数据可视化的王者库是谁？凭什么？
三种前端可视化技术对比相关问题总结
- 可视化什么时候用 svg/canvas/webGL ？
- canvas 基于帧绘制，每次都全帧内容渲染，会不会太低效了？SVG 或 WebGL是这样吗？
- 音频可视化样例使用 Canvas 还是 WebGL 实现好？
- WebGL 的实例化渲染技术
2D性能比较总结
较大数量级对象的绘制性能上：WebGL > Canvas > SVG
