【canvas】canvas入门——用canvas制作倒计时项目总结

项目演示

点阵

在canvas中绘制数字，可以使用点阵的方式。

下面是5的点阵布局，1代表要绘制，0代表不要绘制。这里数字采用的是10 * 7的网格系统，冒号是10 * 4的网格系统。

[
  [1, 1, 1, 1, 1, 1, 1],
  [1, 1, 0, 0, 0, 0, 0],
  [1, 1, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 1, 1],
  [0, 0, 0, 0, 0, 1, 1],
  [0, 0, 0, 0, 0, 1, 1],
  [0, 0, 0, 0, 0, 1, 1],
  [1, 1, 0, 0, 0, 1, 1],
  [0, 1, 1, 1, 1, 1, 0]
]

有了这个这个网格的系统，我们就能将数字绘制出来了。

数字绘制

在canvas中如何用圆将数字绘制出来呢？，圆心的x轴坐标，y坐标如何确定？

ctx.arc(
  x + j * 2 * (radius + 1) + (radius + 1),
  y + i * 2 * (radius + 1) + (radius +