Canvas入门：点、线、形状，如何掌握canvas基础？

2023-10-20 14:24:05

引言

在网页设计中，我们经常需要创建图形、动画和交互元素来增强用户体验。在HTML5之前，这些元素通常使用Flash或Java applet等技术来实现。然而，这些技术都存在一些缺点，例如，它们需要安装额外的插件，并且可能会导致安全问题。

Canvas是HTML5中新增的元素，它允许你在网页中使用JavaScript来创建和操作图形和动画。Canvas使用了一个简单的二维绘图API，可以让你轻松创建各种各样的图形，包括点、线、形状、文本和图像。你还可以使用Canvas创建动画和交互元素，例如，你可以让用户在画布上绘图或拖动元素。

Canvas基础

1. 画布尺寸

在使用Canvas之前，你需要先创建一个画布。你可以通过在HTML文档中添加一个<canvas>元素来创建画布。<canvas>元素的宽和高属性指定了画布的尺寸。

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

2. 获取画布上下文

一旦你创建了一个画布，你就可以通过调用getContext()方法来获取它的上下文。上下文对象提供了你用来在画布上绘图和操作图形的所有方法。

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

3. 绘制点和线

要绘制一个点，你可以使用beginPath()方法开始一个新的路径，然后使用moveTo()方法将光标移动到该点的坐标。最后，使用lineTo()方法将光标移动到下一个点的坐标并使用stroke()方法绘制该线。

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 200);
ctx.stroke();

4. 绘制形状

要绘制一个形状，你可以使用beginPath()方法开始一个新的路径，然后使用moveTo()方法将光标移动到形状的第一个点的坐标。接下来，使用lineTo()方法将光标移动到形状的下一个点的坐标，并使用closePath()方法关闭路径。最后，使用fill()方法填充形状并使用stroke()方法绘制形状的边框。

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.lineTo(200, 200);
ctx.lineTo(10, 200);
ctx.closePath();
ctx.fill();
ctx.stroke();

5. 绘制文本

要绘制文本，你可以使用fillText()方法或strokeText()方法。fillText()方法在指定的位置绘制填充文本，而strokeText()方法在指定的位置绘制边框文本。

ctx.fillText("Hello, world!", 10, 50);
ctx.strokeText("Hello, world!", 10, 50);

6. 绘制图像

要绘制图像，你可以使用drawImage()方法。drawImage()方法可以将指定的图像绘制到画布上。

var image = new Image();
image.src = "image.png";
ctx.drawImage(image, 10, 10);

Canvas动画

你可以使用Canvas来创建动画。要创建动画，你需要使用requestAnimationFrame()方法来请求浏览器在下一帧时调用你的动画函数。在你的动画函数中，你可以使用Canvas的绘图API来更新画布上的图形。

function animate() {
  // 更新画布上的图形

  // 请求浏览器在下一帧时调用animate()函数
  requestAnimationFrame(animate);
}

// 启动动画
animate();

Canvas交互

你可以使用Canvas来创建交互元素。例如，你可以让用户在画布上绘图或拖动元素。要创建交互元素，你需要使用Canvas的事件监听器。

canvas.addEventListener("mousedown", function(event) {
  // 当鼠标在画布上按下时触发

  // 获取鼠标点击的坐标
  var x = event.clientX;
  var y = event.clientY;

  // 在鼠标点击的位置绘制一个点
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y);
  ctx.stroke();
});