跳至主要內容

Canvas基础

zfh前端图形CanvasCanvas基础小于 1 分钟约 251 字

前端可视化选型
前端可视化选型

创建 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
}
上次编辑于:
本站勉强运行 小时