Canvas基础

Frank
  • 前端图形
  • Canvas
  • Canvas基础
小于 1 分钟约 201 字...

创建 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
}
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1