HTML如何用JS搞定Canvas？手把手教你用绘图API做出酷炫动画

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《HTML如何用JS玩转Canvas？绘图API+动画实现超详细教程》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

JS通过Canvas API操作canvas元素实现图形绘制与动画效果，首先获取上下文并调用API绘图，结合requestAnimationFrame创建动画。1.定义canvas元素并指定id和尺寸；2.使用JS获取canvas元素及其2D渲染上下文，若失败则提示错误；3.使用ctx对象绘制矩形、圆形、线条等图形；4.优化性能时减少重绘区域，使用离屏Canvas及requestAnimationFrame；5.Canvas动画中利用requestAnimationFrame控制帧率，避免卡顿；6.监听点击事件需计算坐标是否在图形内，或使用isPointInPath方法；7.文本换行需手动计算分行绘制，样式通过font属性控制；8.根据需求选择Canvas或WebGL，前者适合简单2D图形，后者适合高性能3D图形。

简而言之，HTML 中，JS 通过 Canvas API 操纵 元素，实现图形绘制和动画效果。核心在于获取 canvas 上下文，然后调用 API 绘制图形、处理图像数据，最后结合 requestAnimationFrame 创建流畅动画。

解决方案

首先，在 HTML 中定义一个 元素，并为其指定 id 和尺寸：

<canvas id="myCanvas" width="500"    style="max-width:100%"></canvas>

接下来，使用 JavaScript 获取 canvas 元素，并获取其 2D 渲染上下文：

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

if (ctx) {
  // 绘图操作在这里进行
} else {
  console.error('Canvas 上下文获取失败，浏览器不支持 Canvas 或配置错误。');
}

如果 getContext('2d') 返回 null，很可能是因为浏览器版本过低，或者 canvas 元素本身存在问题。务必检查 HTML 结构和浏览器兼容性。

现在，我们可以使用 ctx 对象提供的各种绘图 API。例如，绘制一个矩形：

ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 80); // 绘制矩形，参数：x, y, width, height

绘制圆形：

ctx.beginPath(); // 开始一个新的路径
ctx.arc(200, 150, 40, 0, 2 * Math.PI); // 圆心坐标，半径，起始角度，结束角度
ctx.fillStyle = 'blue';
ctx.fill(); // 填充圆形
ctx.closePath(); // 关闭路径

绘制线条：

ctx.beginPath();
ctx.moveTo(300, 50); // 起始点
ctx.lineTo(400, 150); // 终点
ctx.strokeStyle = 'green'; // 设置线条颜色
ctx.lineWidth = 5; // 设置线条宽度
ctx.stroke(); // 绘制线条
ctx.closePath();

这些只是 Canvas API 的冰山一角。 还有 strokeRect、clearRect、fillText、drawImage 等等，功能非常强大。

Canvas 性能优化：如何避免卡顿？

Canvas 性能优化是一个老生常谈的问题。频繁的重绘，特别是复杂图形，很容易导致卡顿。

• 减少重绘区域： 只更新需要改变的部分。使用 clearRect 清除特定区域，而不是整个画布。

• 离屏 Canvas： 先在内存中的 Canvas 上绘制，然后一次性将结果绘制到屏幕 Canvas 上。这可以减少屏幕重绘次数。

  const offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = canvas.width;
  offscreenCanvas.height = canvas.height;
  const offscreenCtx = offscreenCanvas.getContext('2d');
  
  // 在 offscreenCanvas 上绘制复杂图形
  offscreenCtx.fillStyle = 'purple';
  offscreenCtx.fillRect(0, 0, 100, 100);
  
  // 一次性绘制到屏幕 Canvas
  ctx.drawImage(offscreenCanvas, 0, 0);

• 使用 requestAnimationFrame： 这是浏览器提供的专门用于动画的 API，可以确保动画在最佳时机执行，避免不必要的重绘。

  function animate() {
    // 更新动画状态
    // ...
  
    // 绘制
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    // ... 绘制新的图形 ...
  
    requestAnimationFrame(animate);
  }
  
  requestAnimationFrame(animate); // 启动动画

• 避免在绘制循环中创建对象： 这会频繁触发垃圾回收，影响性能。预先创建好对象，然后在循环中复用。

• 考虑 WebGL： 如果 Canvas 绘制过于复杂，可以考虑使用 WebGL，它利用 GPU 进行渲染，性能更高。不过，WebGL 的学习曲线也更陡峭。

Canvas 动画：requestAnimationFrame 的正确使用姿势

requestAnimationFrame 是实现 Canvas 动画的关键。它告诉浏览器希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数。

let startTime = null;

function animate(currentTime) {
  if (!startTime) startTime = currentTime;
  const progress = currentTime - startTime;

  // 根据时间进度更新动画状态
  const x = Math.sin(progress / 1000) * 100 + 200; // 示例：正弦运动

  // 绘制
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 150, 20, 0, 2 * Math.PI);
  ctx.fillStyle = 'orange';
  ctx.fill();
  ctx.closePath();

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

这里需要注意几点：

• requestAnimationFrame 的回调函数接收一个参数 currentTime，表示当前时间。可以用它来计算动画的进度。
• 动画的逻辑应该放在 animate 函数中。
• 每次绘制前，通常需要使用 clearRect 清空画布。
• 必须再次调用 requestAnimationFrame 来安排下一次动画帧。

Canvas 事件处理：如何监听点击事件？

Canvas 本身不具备 DOM 元素那样的事件监听能力。 需要自己计算鼠标点击的位置是否在某个图形内部。

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

  // 检查是否点击了某个圆形
  const circleX = 200;
  const circleY = 150;
  const circleRadius = 40;
  const distance = Math.sqrt((x - circleX) * (x - circleX) + (y - circleY) * (y - circleY));

  if (distance <= circleRadius) {
    alert('点击了圆形！');
  }
});

这段代码监听了 canvas 的 click 事件，计算了鼠标点击的坐标，然后判断该坐标是否在某个圆形的内部。

这种方法适用于简单的图形。 对于复杂的图形，可以使用 Canvas 的 isPointInPath() 方法：

ctx.beginPath();
ctx.rect(50, 50, 100, 80); // 定义一个矩形
ctx.closePath();

if (ctx.isPointInPath(x, y)) {
  alert('点击了矩形！');
}

isPointInPath() 方法会检查指定的坐标是否在当前路径的内部。 使用前，需要先定义好路径。

Canvas 文本渲染：如何实现换行和样式控制？

Canvas 文本渲染相对简单，但要实现复杂的样式控制和换行，需要一些技巧。

基本的文本渲染：

ctx.font = '20px Arial'; // 设置字体
ctx.fillStyle = 'black'; // 设置颜色
ctx.fillText('Hello, Canvas!', 50, 50); // 绘制文本，参数：文本内容，x, y

实现换行：

Canvas 本身没有提供自动换行的功能。需要手动计算文本的宽度，然后分行绘制。

const text = 'This is a long text that needs to be wrapped to multiple lines.';
const maxWidth = 200; // 最大宽度
const lineHeight = 25; // 行高
let x = 50;
let y = 50;

function wrapText(context, text, x, y, maxWidth, lineHeight) {
  const words = text.split(' ');
  let line = '';

  for (let n = 0; n < words.length; n++) {
    const testLine = line + words[n] + ' ';
    const metrics = context.measureText(testLine);
    const testWidth = metrics.width;

    if (testWidth > maxWidth && n > 0) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
}

wrapText(ctx, text, x, y, maxWidth, lineHeight);

这个 wrapText 函数会将文本按照指定的宽度进行换行。

样式控制：

Canvas 文本样式控制主要通过 font 属性实现。 可以设置字体大小、字体类型、字体粗细等。

ctx.font = 'bold 30px "Times New Roman", serif';
ctx.fillStyle = 'red';
ctx.fillText('Styled Text', 50, 100);

Canvas 的文本渲染能力相对有限，如果需要更复杂的文本排版，可以考虑使用 SVG 或 HTML。

Canvas 与 WebGL：如何选择？

Canvas 和 WebGL 都是用于在浏览器中绘制图形的技术，但它们的应用场景和性能特点有所不同。

• Canvas： 基于像素的绘图，使用 JavaScript API 进行操作。 适合绘制简单的 2D 图形、图表、动画等。 学习曲线相对平缓。

• WebGL： 基于向量的绘图，利用 GPU 进行加速。 适合绘制复杂的 3D 图形、游戏、可视化等。 性能更高，但学习曲线陡峭。

选择哪种技术取决于具体的需求。 如果只需要绘制简单的 2D 图形，Canvas 是一个不错的选择。 如果需要绘制复杂的 3D 图形，或者对性能要求很高，WebGL 则是更好的选择。

有时候，也可以将 Canvas 和 WebGL 结合使用。 例如，使用 WebGL 绘制 3D 图形，然后将结果渲染到 Canvas 上，再在 Canvas 上添加一些 2D 元素。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~