Canvas API：超越HTML的艺术创作画布

2023-12-10 18:10:21





Canvas API 是HTML5的一个强大特性，它允许您创建和控制动态图形和交互。您可以使用Canvas API创建游戏、艺术品、数据可视化和其他类型的图形应用程序。

一、首先新建一个<canvas>网页元素。

```html
<canvas id="myCanvas" width="500" height="500"></canvas>

如果您想在网页中使用 Canvas API，您需要首先创建一个

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

一旦您创建了

ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);

您可以使用 context 对象来填充矩形、创建路径、绘制文本和其他类型的图形。

二、使用Canvas API绘图

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(200, 0);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

上面的代码将创建一个三角形。

三、使用Canvas API创建交互图形

Canvas API 还允许您创建交互图形。您可以使用 addEventListener() 方法来监听画布上的事件，例如鼠标单击、鼠标移动和键盘按下。

canvas.addEventListener("click", function(e) {
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  ctx.fillStyle = "red";
  ctx.fillRect(x, y, 10, 10);
});