vectors vs bitmaps

vectors

矢量图,由一系列形状(shapes)组成,而这些形状是用一系列方程来描述的。因此,可以进行形变(位移,旋转,缩放等)而不有损画质。

bitmaps

位图,局限于将相应的颜色填充在相应的像素点,形变后可能会产生锯齿或颜色混杂等情况。

canvas很好的解决了这一问题。

canvas API提供了许多绘图命令:

  • beginPath()用于定义一个新的路径。
  • closePath()用于闭合路径。
  • moveTo()移动到某一点为相关路径的绘制作准备。
  • lineTo(x, y)绘制直线,(x, y)为终点坐标。
  • rect(x, y, width, height)绘制矩形,(x, y)为左上角坐标,width 和 height 分别为宽高。
  • arc(x, y, radius,startAngleRadians, endAngleRadians, antiClockwiseDirection)绘制圆弧,(x, y)为圆心坐标,起始点的角度以弧度表示。
  • fill(), stroke()分别填充和描边路径。fill(), stroke()的样式分别由fillStyle=[string | object], strokeStyle=[string | object]定义。
  • drawImage(image, ...)在canvas区域内画图。
  • clearRect(x, y, width, height)类似于rect(),只不过这一次在现有canvas上抠去这个矩形。  canvas的绘图机制:
  1. using drawing commands to create shapes
  2. modify shapes
  3. render path in bitmap
comments powered by Disqus