canvas API绘图那么复杂，实际工作中如何操作？

Question

canvas API绘图那么复杂，实际工作中如何使用它绘制图形？小弟是一位前端开发人员，只简单了解过canvas，没有用它做过项目，我知道有类似zRender和spriteJS这样的绘图库，想请教一下各位大哥：实际项目中如果想实现绘图采用什么方法？总感觉这一块很吸引人，但是想深入却不知道如何开始。

Answer 1

从学习的角度来说，一套再复杂的技术，也要从头开始。建议先从一个绘图库的学习开始，比如spriteJS，官网有完善的文档和示例。对照着示例从头学习一遍，后面遇到相关的业务，就可以直接用了。

学习过程，可以供用Codepen之类的轻量级前端编辑器。当然，我更推荐我自家的插件产品RunJS插件版，这是个学习过程中的截图：

Answer 2

canvas有三种模式：
2d
webgl
webgpu

用途很广：
二维码
摄像头画面
视频二次处理
展示3d模型或交互
高性能图像展示滤镜

Answer 3

Canvas 的绘图接口即便复杂，也并不“难用”，真正的简单且难用的方法应该是只给两个接口：

class CompletxCanvas2DRenderingContext{
    /**
     * @method getColorByCoordinate - 获取指定坐标的像素点颜色
     */
    getColorByCoordinate(x:number, y:number):string{}

    /**
     * @method setColorByCoordinate - 给指定坐标的像素点着色
     */
    setColorByCoordinate(x:number, y:number, color:string){}
}

但是即便基于这样难用的东西，开源社区的大佬们也极有可能给你提供封装良好的绘图库，就更不用说目前的 Canvas 绘图接口比这个好用千百倍。

Answer 4

实际工作推荐 auto-drawing （基于zrender）
配置json就可以画出复杂的图形。已在公司工业软件中使用。

Answer 5

• 想深入学习肯定从基础开始更好，推荐学习网站：https://webglfundamentals.org...
• 如果只是要完成需求，可以用封装好的三方库，比如 threejs，babylon
  ps：标准化组织正在推进 webgpu 新标准