使用 Canvas 绘图

1. 基本用法

<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>

2. 2D 上下文

2.1 填充和描边

fillStyle 和 strokeStyle

2.2 绘制矩形

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

2.3 绘制路径

2.4 绘制文本

2.5 变换

2.6 绘制图像

2.7 阴影

2.8 渐变

2.9 模式

2.10 使用图像数据

2.11 合成

3. WebGL

3.1 类型化数组

• 视图；
• 类型化视图；

3.2 WebGL 上下文

• 常量；
• 方法命名；
• 准备绘图；
• 视图与坐标；
• 缓冲区；
• 错误；
• 着色器；
• 编写着色器；
• 编写着色器程序；
• 为着色器传入值；
• 调试着色器和程序；
• 绘图；
• 纹理；
• 读取像素；

4. 支持