canvas API

用户4081281200381
226 阅读4分钟

一、Canvas 基础概念与核心对象

Canvas 是 HTML5 提供的绘图容器，通过 JavaScript 操作 CanvasRenderingContext2D 上下文实现图形绘制，常用于图表、游戏、图像编辑等场景。核心对象包括：

  • canvas 元素：通过 document.createElement('canvas') 创建，需指定 width 和 height 属性（避免默认尺寸导致模糊）。
  • 绘图上下文：通过 canvas.getContext('2d') 获取 2D 渲染上下文（最常用），或 getContext('webgl') 获取 3D 上下文。

二、2D 绘图核心 API（面试重点）

1. 基础绘制 API
  • 线段与路径：
    • beginPath()：开始新路径。
    • moveTo(x, y)：移动画笔到指定坐标。
    • lineTo(x, y)：从当前点绘制直线到指定坐标。
    • closePath()：闭合路径（连接起点和终点）。
    • stroke()：描边路径。
    • fill()：填充路径内部。
  • 矩形绘制：
    • rect(x, y, width, height)：绘制矩形路径。
    • fillRect(x, y, width, height)：直接填充矩形（不创建路径）。
    • strokeRect(x, y, width, height)：直接描边矩形。
    • clearRect(x, y, width, height)：清除矩形区域内容。
2. 文本绘制 API
  • fillText(text, x, y [, maxWidth])：填充文本。
  • strokeText(text, x, y [, maxWidth])：描边文本。
  • font：设置字体样式（如 '20px Arial'）。
  • textAlign：文本对齐方式（left/center/right）。
  • textBaseline：文本基线（top/middle/bottom）。
3. 图像操作 API
  • drawImage(image, dx, dy)：绘制图像到画布（image 可为 img 元素、Canvas 或视频）。
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：裁剪并绘制图像。
  • toDataURL(type, quality)：将画布内容转为 Base64 格式（type 如 'image/png'，quality 控制 JPG 质量）。
4. 样式与变换 API
  • 颜色与渐变：
    • fillStyle/strokeStyle：设置填充/描边颜色（支持 #RGB、rgba()、渐变对象）。
    • createLinearGradient(x1, y1, x2, y2)：创建线性渐变。
    • createRadialGradient(x1, y1, r1, x2, y2, r2)：创建径向渐变。
  • 阴影与透明度：
    • shadowColor/shadowBlur/shadowOffsetX/shadowOffsetY：设置阴影效果。
    • globalAlpha：设置全局透明度（0-1）。
  • 变换操作：
    • translate(x, y)：移动坐标系原点。
    • rotate(angle)：旋转坐标系（角度需转弧度：angle * Math.PI / 180）。
    • scale(sx, sy)：缩放坐标系。
    • save()/restore()：保存/恢复绘图状态（避免变换影响后续绘制）。

三、高级功能与优化 API

  • 像素操作（图像数据处理）：
    • getImageData(x, y, width, height)：获取矩形区域的像素数据（ImageData 对象）。
    • putImageData(imageData, dx, dy)：将像素数据绘制到画布。
    • ImageData.data：像素数组（RGBA 格式，每像素 4 个字节）。
  • 合成与裁剪：
    • clip()：将当前路径设为裁剪区域，后续绘制仅在区域内可见。
    • globalCompositeOperation：设置图形合成模式（如 'source-over'/'destination-in' 等 12 种模式）。
  • 性能优化：
    • requestAnimationFrame()：结合 Canvas 实现平滑动画（替代 setInterval）。
    • 分层绘制：使用多个 Canvas 元素叠加（如背景层、动画层、交互层），减少重绘范围。
    • 缓存绘制：将复杂图形绘制到离屏 Canvas（createOffscreenCanvas()，需浏览器支持）。

四、实战场景与常见问题

  • 典型应用：
    • 数据可视化（自定义图表，如折线图、雷达图）。
    • 游戏开发（2D 游戏引擎，如《植物大战僵尸》网页版）。
    • 图像编辑（截图、滤镜效果，如高斯模糊可通过 getImageData 实现）。
    • 文字渲染（如验证码、动态字体效果）。
  • 面试高频问题：
    • Canvas 与 SVG 的区别：Canvas 是像素级绘制（适合动画、游戏），SVG 是矢量图形（适合图标、复杂图形，可缩放不失真）。
    • Canvas 如何优化性能：
      • 减少频繁重绘（合并绘制操作，使用 requestAnimationFrame）。
      • 避免大量像素操作（如复杂滤镜可离线处理）。
      • 使用 Web Worker 分担计算密集型任务（如像素处理）。
    • Canvas 如何实现动画：通过清除画布 + 重新绘制 + requestAnimationFrame 循环实现。

五、3D 绘图（WebGL）简介

虽然 Canvas 主要通过 2D 上下文使用，但 WebGL（基于 OpenGL ES 2.0）可实现 3D 绘图：

  • 通过 canvas.getContext('webgl') 获取上下文。
  • 需手动编写着色器（Shader）代码（GLSL 语言）处理顶点和片元渲染。
  • 常用于 3D 游戏、模型展示（如 Three.js 库封装了 WebGL 底层操作）。

总结

Canvas API 以 2D 绘图为核心，通过路径、文本、图像、像素操作等接口实现丰富的图形效果，适合性能要求高的动画和可视化场景。面试中需重点掌握基础绘制流程、样式变换、像素操作及性能优化策略，并理解 Canvas 与 SVG 的适用场景差异。

avatar
文章
阅读
粉丝