比尔盖茨都封神的Canvas，你凭什么还不懂？🔥

前端

2023-03-21 10:11:35

Canvas 绘图：打造引人入胜的网页体验

网页性能优化

网页性能在当今的在线世界中至关重要。Canvas 和 WebGL 在在线教育、编辑、直播和游戏等应用程序中日益流行，它们为网页增加了丰富的视觉元素，但优化这些元素对于确保最佳用户体验至关重要。

Canvas 简介

Canvas 是一个功能强大的绘图工具，可让您在网页上创建交互式图形，例如动画、图表和游戏。它提供了多种方法，您可以利用这些方法绘制各种形状和文本。

Canvas 绘图基础

了解 Canvas 的绘图基础知识至关重要，以下是一些基本方法：

moveTo()： 将笔触移动到特定坐标。
lineTo()： 从当前位置绘制一条线到特定坐标。
arc()： 绘制圆或圆弧。
rect()： 绘制矩形或正方形。
fillRect()： 填充矩形或正方形。
strokeRect()： 描边矩形或正方形。
fillText()： 在画布上绘制文本。
strokeText()： 在画布上描边文本。

Canvas 绘图示例

为了更好地理解 Canvas 绘图，让我们创建一个显示弹跳球的简单动画。

HTML 代码：

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript 代码：

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

const ball = {
  x: 250,
  y: 250,
  radius: 20,
  vx: 5,
  vy: 5
};

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
}

function updateBall() {
  ball.x += ball.vx;
  ball.y += ball.vy;

  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    ball.vx = -ball.vx;
  }
  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
    ball.vy = -ball.vy;
  }
}

function mainLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  updateBall();
  requestAnimationFrame(mainLoop);
}

mainLoop();