canvas基础之旅

什么是Canvas？

Canvas是HTML5提供的一个绘图API，它可以通过JavaScript在网页上绘制各种图形，如线条、矩形、圆形、文本等。Canvas拥有跨浏览器、跨平台的特性，并且支持动画、效果等复杂的绘图操作。

Canvas的基本用法

Canvas的用法很简单，只需在HTML文件中创建一个canvas元素，然后使用JavaScript获取该元素的上下文（context），即可开始在画布上绘制图形。

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

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

在获取到上下文之后，我们就可以使用上下文提供的API来绘制各种图形了，比如绘制一个红色的矩形：

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

Canvas的绘图原理

Canvas的绘图原理是通过操作像素点来实现的。当我们绘制一条线条、矩形或者其他图形时，实际上就是将相应的像素点涂上颜色。而Canvas提供的API就是用来操作这些像素点的。

Canvas的常用API

Canvas提供了许多API用于绘制图形，下面列举几个常用的API及其简介：

• getContext() 获取绘图上下文，这是操作Canvas的入口。
• fillStyle 设置填充颜色或者填充样式，比如"#000000"或者"linear-gradient(...)"。
• strokeStyle 设置描边颜色或者描边样式，与fillStyle用法相似。
• fillRect() 绘制一个填充矩形。
• strokeRect() 绘制一个描边矩形。
• clearRect() 清空一个矩形区域。
• beginPath() 开始绘制路径。
• moveTo() 移动当前绘制点到指定的位置。
• lineTo() 绘制一条从当前绘制点到指定位置的线条。
• stroke() 绘制描边路径。
• fill() 绘制填充路径。
• arc() 绘制圆或者弧形。
• textBaseline 设置文本基线，以确定文本的垂直位置。

使用Canvas制作动画

使用Canvas制作动画也很简单，只需每隔一段时间清空画布，重新绘制新的图形即可。下面是一个简单的动画示例，每隔20毫秒在画布上随机绘制一些小球，并让它们跳动：

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < 10; i++) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var r = Math.random() * 20;

    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

在上面的代码中，我们通过requestAnimationFrame()方法来循环调用draw()函数，实现动画效果。

总结

Canvas是HTML5提供的一个绘图API，可以用于绘制各种图形、动画等复杂的绘图操作。基本用法很简单，只需创建一个canvas元素，获取其上下文，并使用API来绘制图形。此外，Canvas还提供了许多常用的API用于绘制各种图形。如果您对前端绘图感兴趣，那么Canvas是您不可或缺的技能之一。