Canvas基础

推荐阅读

浏览器中实现可视化的四种方式

前端可视化选型

参考

• MDN

• 慕课网:炫丽的倒计时效果 Canvas 绘图与动画基础

创建 canvas

<canvas id="tutorial" width="1050" height="724"></canvas>

通过 DOM 指定宽度高度

const canvas = document.getElementById('tutorial')
canvas.width = '1050'
canvas.height = '724'

渲染上下文

const canvas = document.getElementById('tutorial')
const ctx = canvas.getContext('2d')

Canvas 公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。js 要找到渲染上下文，然后在它的上面绘制。getContext是用来获得渲染上下文和它的绘画功能。

检查支持性

if (canvas.getContext) {
  const ctx = canvas.getContext('2d')
  // 使用context绘制
} else {
  // 提示不支持canvas
}