Canvas 标签 HTML - JavaScript

Canvas 标签是 HTML5 中非常强大的元素之一，它可以用来绘制图形、动画、交互式界面等等。它提供了一种通过 JavaScript 将内容绘制到 Web 页面中的简单方法。

如何使用 Canvas 标签？

要使用 Canvas，首先需要在 HTML 中添加一个 canvas 元素：

<canvas id="myCanvas"></canvas>

然后需要使用 JavaScript 中的 getContext() 方法获取 canvas 对象的上下文，可以将其视为绘图工具：

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

现在就可以使用 ctx 上下文中提供的方法来绘制内容了。

绘制基本形状

绘制矩形

使用 fillRect() 和 strokeRect() 方法可以绘制实心和空心矩形：

// 绘制实心矩形
ctx.fillRect(x, y, width, height);

// 绘制空心矩形
ctx.strokeRect(x, y, width, height);

绘制圆形

使用 arc() 方法可以绘制圆：

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
ctx.fill();  // 填充实心圆
ctx.stroke();  // 绘制空心圆

绘制路径

使用 beginPath() 和 closePath() 方法可以开始一条新路径、并结束路径：

ctx.beginPath();
// 绘制路径
ctx.closePath();

在开始路径后，还可以使用 moveTo()、lineTo()、quadraticCurveTo()、bezierCurveTo() 等方法来绘制路径：

ctx.moveTo(x, y); // 起始点
ctx.lineTo(x, y); // 直线
ctx.quadraticCurveTo(cpx, cpy, x, y);  // 二次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);  // 三次贝塞尔曲线

然后使用 stroke() 或者 fill() 方法来填充和绘制路径。

Canvas 动画

Canvas 同样可以用来创建动画。使用 requestAnimationFrame() 方法可以请求浏览器调用一个指定的函数来更新动画：

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除画布
  
  // 绘制动画内容
  
  requestAnimationFrame(draw);
}

draw();

在 draw() 函数中使用其他绘制方法来绘制动画内容，然后使用 requestAnimationFrame() 方法不断地调用 draw() 函数，就可以实现动画效果了。

总结

Canvas 是一个非常强大的 Web API，它可以用来绘制各种形状，实现动画效果等等。如果你正在开发 Web 应用程序并且需要绘制一些自定义的图形，那么 Canvas 是你的不二之选。