Canvas

图片.png

图片.png

图片.png

2D上下文：

两种基本绘图操作是填充和描边。

• 描边
  strokeStyle
• 填充
  fillStyle

绘制矩形：

矩形是一种可以直接在2D上下文中绘制的形状

• fillRect()
• strokeRect()
• clearRect()

绘制路径:

• 先调用beginPath()方法
• 然后调用下列方法绘制路径

• arc
• arcTo
• bezierCurveTo
• lineTo
• moveTo
• quadraticCurveTo
• rect

• 最后一步调用stroke()方法，才能把图形绘制到画布上

下面为绘制一个时钟：

• 绘制文字

• fillText()

• strokeText()
  两个方法拥有的共同属性：

  • font
  • textAlign
  • textBaseline

• WebGL

WebGL是针对Canvas的3D上下文

WebGL支持比2D上下文更丰富和更强大的图形图像处理能力，比如：

• 用GLSL（OpenGL着色语言）编写的顶点和片段着色器
• 支持类型化数组，既能够将数组中的数据限定为某种特定的数值类型
• 创建和操作纹理