Canvas API 参考

const canvas = document.getElementById('myCanvas')

// 设置尺寸
canvas.width = 800
canvas.height = 600

// 获取 2D 上下文
const ctx = canvas.getContext('2d')

// 获取图像数据
const dataURL = canvas.toDataURL('image/png')

// 获取 Blob
canvas.toBlob((blob) => {
  // 处理 Blob
}, 'image/png', 0.9)

// 转移到离屏画布
const offscreen = canvas.transferControlToOffscreen()

// 方式1：直接创建
const offscreen = new OffscreenCanvas(800, 600)

// 方式2：从现有 Canvas 转移
const canvas = document.getElementById('myCanvas')
const offscreen = canvas.transferControlToOffscreen()

// main.js
const canvas = document.getElementById('myCanvas')
const offscreen = canvas.transferControlToOffscreen()
const worker = new Worker('renderer.js')

worker.postMessage({ canvas: offscreen }, [offscreen])

// renderer.js (Worker)
self.onmessage = function(e) {
  const canvas = e.data.canvas
  const ctx = canvas.getContext('2d')
  
  // 在 Worker 中渲染
  ctx.fillStyle = '#3498db'
  ctx.fillRect(0, 0, 100, 100)
}

// Worker 中渲染完成后通知主线程
const bitmap = offscreen.transferToImageBitmap()
self.postMessage({ bitmap }, [bitmap])

// 主线程接收
worker.onmessage = function(e) {
  const ctx = canvas.getContext('2d')
  ctx.drawImage(e.data.bitmap, 0, 0)
}

const ctx = canvas.getContext('2d')

// 带选项
const ctx = canvas.getContext('2d', {
  alpha: false,      // 不透明画布
  desynchronized: true // 低延迟渲染
})

ctx.fillRect(10, 10, 100, 50)
ctx.strokeRect(120, 10, 100, 50)
ctx.clearRect(30, 20, 60, 30)

// roundRect 方法（现代浏览器）
ctx.beginPath()
ctx.roundRect(250, 10, 100, 50, 10) // 圆角半径 10
ctx.fill()

// 支持每个角不同半径
ctx.beginPath()
ctx.roundRect(250, 80, 100, 50, [5, 10, 15, 20]) // 左上、右上、右下、左下
ctx.fill()

// 创建 Path2D 对象
const path = new Path2D()
path.rect(10, 10, 100, 50)

// 从 SVG 路径创建
const svgPath = new Path2D('M 10 10 L 100 10 L 100 60 Z')

// 使用路径
ctx.fill(path)
ctx.stroke(path)

ctx.setLineDash([10, 5])
ctx.strokeRect(10, 10, 100, 50)

const gradient = ctx.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, 'red')
gradient.addColorStop(1, 'blue')
ctx.fillStyle = gradient

const metrics = ctx.measureText('Hello')

// 计算文本边界框
const textWidth = metrics.width
const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent

console.log(`宽度: ${textWidth}, 高度: ${textHeight}`)

// 基本绘制
ctx.drawImage(img, 0, 0)

// 缩放绘制
ctx.drawImage(img, 0, 0, 200, 150)

// 裁剪绘制
ctx.drawImage(img, 0, 0, 100, 100, 50, 50, 200, 200)

// 从图像元素创建
const bitmap = await createImageBitmap(img)

// 从 Blob 创建
const blob = new Blob([data], { type: 'image/png' })
const bitmap = await createImageBitmap(blob)

// 从 Canvas 创建
const bitmap = await createImageBitmap(canvas)

// 从 ImageData 创建
const bitmap = await createImageBitmap(imageData)

const bitmap = await createImageBitmap(img, {
  resizeWidth: 200,
  resizeHeight: 150,
  resizeQuality: 'high',  // 'pixelated', 'low', 'medium', 'high'
  premultiplyAlpha: 'default',  // 'none', 'premultiply', 'default'
  colorSpaceConversion: 'default'  // 'none', 'default'
})

// 也可以指定裁剪区域
const bitmap = await createImageBitmap(img, 0, 0, 100, 100)

// 绘制到 Canvas
ctx.drawImage(bitmap, 0, 0)

// 在 Worker 中使用
const offscreen = new OffscreenCanvas(800, 600)
const ctx = offscreen.getContext('2d')
ctx.drawImage(bitmap, 0, 0)

// 释放资源
bitmap.close()

console.log(bitmap.width, bitmap.height)

{
  width: Number,     // 宽度
  height: Number,    // 高度
  data: Uint8ClampedArray  // 像素数据 [r, g, b, a, ...]
}

const imageData = ctx.getImageData(0, 0, 100, 100)

// 访问像素
const data = imageData.data
const r = data[0]
const g = data[1]
const b = data[2]
const a = data[3]

// 修改像素
data[0] = 255  // R
data[1] = 0    // G
data[2] = 0    // B
data[3] = 255  // A

ctx.putImageData(imageData, 0, 0)

// 模糊
ctx.filter = 'blur(5px)'

// 亮度
ctx.filter = 'brightness(1.5)'

// 对比度
ctx.filter = 'contrast(200%)'

// 灰度
ctx.filter = 'grayscale(100%)'

// 色相旋转
ctx.filter = 'hue-rotate(90deg)'

// 反色
ctx.filter = 'invert(100%)'

// 透明度
ctx.filter = 'opacity(50%)'

// 饱和度
ctx.filter = 'saturate(200%)'

// 褐色调
ctx.filter = 'sepia(100%)'

// 阴影
ctx.filter = 'drop-shadow(5px 5px 10px rgba(0,0,0,0.5))'

// 组合多个滤镜
ctx.filter = 'blur(2px) brightness(1.2) contrast(1.1)'

// 绘制图像时应用滤镜
ctx.drawImage(img, 0, 0)

// 重置滤镜
ctx.filter = 'none'