Canvas小结

以下是使用JavaScript操作Canvas的一些基本小结。

基本概念

  • Canvas元素：在HTML中，<canvas>元素用于定义图形的区域。
  • 绘图上下文：通过Canvas元素的getContext('2d')方法获取，它提供了绘图功能。
  • 坐标系统：Canvas的坐标系统原点在左上角，x轴向右延伸，y轴向下延伸。

创建Canvas

在HTML中创建Canvas元素：

1<canvas id="myCanvas" width="200" height="100"></canvas>

使用JavaScript获取Canvas元素并获取绘图上下文：

1const canvas = document.getElementById('myCanvas');
2const ctx = canvas.getContext('2d');

绘制图形

线条

绘制线条的基本步骤：

  1. moveTo(x, y)：将笔触移动到起始坐标。
  2. lineTo(x, y)：从当前位置绘制线条到指定坐标。
  3. stroke()：应用描边，完成线条的绘制。
1ctx.moveTo(10, 10);
2ctx.lineTo(190, 10);
3ctx.stroke();

矩形

绘制矩形：

  • rect(x, y, width, height)：定义矩形的位置和尺寸。
  • fill()：填充矩形。
  • stroke()：绘制矩形的边框。
1ctx.rect(10, 10, 50, 50);
2ctx.fill();
3ctx.stroke();

圆形

绘制圆形：

  • arc(x, y, radius, startAngle, endAngle, counterClockwise)：绘制圆弧。
    • x, y：圆心坐标。
    • radius：半径。
    • startAngle, endAngle：起始和结束角度（以弧度为单位）。
    • counterClockwise：可选，布尔值，表示是否逆时针绘制。
1ctx.beginPath();
2ctx.arc(100, 50, 40, 0, Math.PI * 2, false);
3ctx.stroke();

文本

绘制文本：

  • fillText(text, x, y, maxWidth)：在指定位置绘制填充文本。
  • strokeText(text, x, y, maxWidth)：在指定位置绘制描边文本。
1ctx.fillText('Hello, Canvas', 50, 50);
2ctx.strokeText('Hello, Canvas', 50, 80);

图片

绘制图片：

  1. 创建Image对象。
  2. 设置图片源。
  3. 等待图片加载完成。
  4. 使用drawImage方法绘制图片。
1const img = new Image();
2img.onload = function() {
3  ctx.drawImage(img, 0, 0);
4};
5img.src = 'path/to/image.png';

颜色和样式

设置颜色和样式：

  • strokeStyle：设置线条颜色。
  • fillStyle：设置填充颜色。
  • lineWidth：设置线条宽度。
  • lineCap：设置线条结束端点样式。
1ctx.strokeStyle = 'blue';
2ctx.fillStyle = 'red';
3ctx.lineWidth = 5;
4ctx.lineCap = 'round';

路径

使用路径绘制复杂图形：

  • beginPath()：开始一个新的路径。
  • closePath()：关闭当前路径，自动连接起点和终点。
1ctx.beginPath();
2ctx.moveTo(20, 20);
3ctx.lineTo(190, 20);
4ctx.lineTo(190, 90);
5ctx.closePath();
6ctx.fill();
7ctx.stroke();

动画

使用requestAnimationFrame实现动画：

 1let angle = 0;
 2function draw() {
 3  ctx.clearRect(0, 0, canvas.width, canvas.height);
 4  ctx.beginPath();
 5  ctx.arc(100, 50, 40, 0, Math.PI * 2 * (angle % 360) / 360, false);
 6  ctx.stroke();
 7  angle++;
 8  requestAnimationFrame(draw);
 9}
10draw();

总结

Canvas提供了丰富的API来绘制图形、文本和图像，并且可以通过JavaScript实现动态效果和动画。掌握Canvas的基本操作是前端开发中的一项重要技能。