canvas基础讲解加实例

2023-12-17 10:17:27

canvas是一种HTML5元素，允许您使用JavaScript在网页上创建图形和动画。它是一个功能强大的绘图工具，可以用来创建各种各样的视觉效果，包括静态图像、动态图形、动画和交互式内容。

canvas入门

要开始使用canvas，您需要在HTML页面中添加一个canvas元素：

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

这段代码将创建一个宽500像素，高300像素的canvas元素。您可以根据需要调整canvas的大小。

接下来，您需要获取canvas的绘图上下文。这可以通过调用canvas元素的getContext()方法来实现：

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

绘图上下文提供了一系列方法，可以用来在canvas上绘制图形和动画。

绘制图形

canvas支持绘制各种各样的图形，包括线段、矩形、圆形、椭圆、弧线和文本。您可以使用ctx.beginPath()方法开始一个新的路径，然后使用ctx.lineTo()、ctx.rect()、ctx.arc()、ctx.ellipse()、ctx.quadraticCurveTo()和ctx.bezierCurveTo()等方法来绘制各种形状。

// 绘制一条线段
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();

// 绘制一个矩形
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();

// 绘制一个圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

// 绘制一个椭圆
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, 45 * Math.PI / 180, 0, 2 * Math.PI);
ctx.stroke();

// 绘制一个弧线
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI / 2);
ctx.stroke();

// 绘制一个二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(100, 100, 200, 10);
ctx.stroke();

// 绘制一个三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(100, 100, 200, 100, 300, 10);
ctx.stroke();

动画

canvas还可以用来创建动画。要创建一个动画，您可以使用requestAnimationFrame()方法来请求浏览器在下一帧时调用一个函数。在该函数中，您可以使用ctx.clearRect()方法清除canvas上的内容，然后使用其他方法重新绘制图形和动画。

function animate() {
  // 清除canvas上的内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制一个移动的圆形
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fill();

  // 更新圆形的坐标
  x += 1;
  y += 1;

  // 如果圆形移出canvas，则将其重置到原点
  if (x > canvas.width || y > canvas.height) {
    x = 0;
    y = 0;
  }

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

// 启动动画
animate();

交互

canvas还可以用来创建交互式内容。您可以使用canvas的addEventListener()方法来监听鼠标事件、键盘事件和触摸事件。当事件发生时，您可以使用ctx.clearRect()方法清除canvas上的内容，然后使用其他方法重新绘制图形和动画。

canvas.addEventListener("mousemove", function(e) {
  // 获取鼠标的坐标
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 清除canvas上的内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制一个移动的圆形
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fill();
});