绘制图形学神器：Canvas入门案例分享

2023-12-10 20:59:21

Canvas：网页上的艺术画布

如果你是一位希望在网页上展现精湛艺术才华的前端工程师，那么Canvas必定会成为你手中的利器。Canvas是一个使用脚本（通常是JavaScript）绘制图形的HTML元素，它赋予你无限的自由度，让你在网页上挥洒创意，打造令人惊叹的视觉盛宴。

Canvas入门指南

1. 加入Canvas元素

在你的HTML代码中，添加一个<canvas>元素并指定它的宽高。例如：

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

2. 获取Canvas上下文

使用getContext()方法获取Canvas的上下文，它提供了绘图所需的API。

var ctx = document.getElementById("myCanvas").getContext("2d");

3. 绘制图形

在Canvas上绘制图形有多种方式，其中包括：

线条：使用lineTo()方法绘制线条。
矩形：使用fillRect()或strokeRect()方法绘制矩形。
圆形：使用arc()或fill()方法绘制圆形。
文本：使用fillText()或strokeText()方法绘制文本。

4. 保存和加载图像

Canvas能够将绘制的图形保存为图像，也可以从图像文件中加载图形。

保存图像 ：使用toDataURL()方法将Canvas上的图像保存为数据URL。
加载图像 ：使用drawImage()方法从图像文件中加载图像并绘制到Canvas上。

Canvas应用案例

1. 柱状图

Canvas可以轻松绘制柱状图。创建一个存储数据的数组，然后使用fillRect()方法绘制每个柱状图。

var data = [10, 20, 30, 40, 50];

for (var i = 0; i < data.length; i++) {
  ctx.fillRect(i * 50, 300 - data[i], 50, data[i]);
}

2. 饼图

Canvas也能绘制饼图。创建存储数据的数组，然后使用arc()和fill()方法绘制每个饼图扇区。

var data = [10, 20, 30, 40, 50];
var startAngle = 0;

for (var i = 0; i < data.length; i++) {
  var endAngle = startAngle + (data[i] / 100) * 2 * Math.PI;
  ctx.arc(150, 150, 100, startAngle, endAngle);
  ctx.fill();
  startAngle = endAngle;
}

3. 游戏

Canvas还可用于开发游戏。你可以使用requestAnimationFrame()方法持续更新游戏状态，并使用drawImage()方法绘制游戏对象。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var ball = {
  x: 100,
  y: 100,
  dx: 5,
  dy: 5
};

function update() {
  ball.x += ball.dx;
  ball.y += ball.dy;

  if (ball.x + 10 > canvas.width || ball.x - 10 < 0) {
    ball.dx = -ball.dx;
  }

  if (ball.y + 10 > canvas.height || ball.y - 10 < 0) {
    ball.dy = -ball.dy;
  }

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ff0000";
  ctx.fillRect(ball.x - 10, ball.y - 10, 20, 20);

  requestAnimationFrame(update);
}

update();