JavaScriptCanvas绘图入门教程

JavaScript Canvas 是网页端实现像素级动态图形、交互式动画和数据可视化的基石技术，无需插件即可直接在 HTML 中高效绘图；本文从创建画布与获取 2D 上下文入手，系统讲解矩形、路径、圆形等基本绘制方法，深入剖析基于 requestAnimationFrame 的平滑动画原理，手把手演示坐标转换与点击检测等交互技巧，并提供离屏渲染、局部重绘等实用性能优化策略，助你快速跨越入门门槛，动手构建游戏、可视化图表或创意动效应用。

想在网页上实现动态图形、游戏或数据可视化，JavaScript Canvas 是绕不开的核心技术。它不依赖额外插件，直接在 HTML 页面绘制像素级图形。下面通过实战角度带你掌握关键用法和常见技巧。

创建Canvas并获取绘图上下文

使用 Canvas 第一步是创建 canvas 元素，并获取 2D 渲染上下文对象。

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

注意设置 width 和 height 属性，而不是用 CSS 拉伸，否则会导致图像模糊。getContext('2d') 返回的 ctx 对象是所有绘图操作的入口。

绘制基本图形

Canvas 提供了绘制矩形、路径、圆形等基础形状的方法。

• 矩形：fillRect 绘制实心矩形，strokeRect 绘制边框，clearRect 清除区域。
• 路径与线条：使用 beginPath() 开始路径，moveTo 定位起点，lineTo 画线，closePath 闭合路径，最后用 stroke 或 fill 渲染。
• 圆形/弧线：arc(x, y, radius, startAngle, endAngle, anticlockwise) 可画圆或扇形。

例如画一个红色圆：

ctx.beginPath();
ctx.arc(400, 300, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();

动画实现原理：requestAnimationFrame

让图形动起来的关键是循环重绘。requestAnimationFrame 比 setInterval 更高效，能适配屏幕刷新率。

基本结构如下：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  // 更新图形位置或状态
  ctx.fillRect(x, y, 40, 40);
  x += dx; // 位置变化
  requestAnimationFrame(animate);
}
animate();

清屏是关键步骤，否则会留下残影。控制 x、y 等变量实现移动、旋转或缩放效果。

交互与事件响应

Canvas 本身不记录图形，所以点击检测需要手动计算坐标。常用方法是监听鼠标事件并转换坐标。

例如判断点是否在矩形内：

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  if (x > 100 && x 100 && y     console.log('点击了目标区域');
  }
});

复杂图形可用路径包围盒或数学公式判断是否命中。

性能优化建议

当绘制大量对象时，性能容易下降。几个实用技巧：

• 减少不必要的重绘，只更新变化区域。
• 避免频繁切换绘图样式（如 fillStyle），批量处理同类图形。
• 离屏 Canvas 预渲染静态内容，再合成到主画布。
• 控制动画帧率，必要时用 if (frame % 3 === 0) 降低更新频率。

基本上就这些。掌握绘图、动画循环和交互处理，就能构建出丰富的视觉应用。多练习绘制图表、粒子系统或小游戏，技能会快速提升。

本篇关于《JavaScriptCanvas绘图入门教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！