使用 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. 支持

posted @ 2015-12-24 20:26  叫我霍啊啊啊  阅读(173)  评论(0)  编辑  收藏  举报