当前位置：首页 > article >正文

HTML5(二)——canvas元素

article 2024/12/21 7:27:29

HTML5 `<canvas>` 元素

HTML5 还引入了元素，允许在网页中动态绘制图形、动画和其他视觉效果。结合 JavaScript，可以用来绘制图形、处理图像、生成图表等。接下来将简要介绍canvas的使用。

基本语法

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

该元素本身不显示任何内容，只是一个容器，用来承载由 JavaScript 绘制的内容。
用id给 <canvas> 元素一个唯一的标识符，以便后续通过 JavaScript 获取元素。
用width和height 定义画布的宽度和高度。如果不设置，默认宽度为 300 像素，高度为 150 像素。

获取上下文 (Context)

在 <canvas> 中绘制图形时，需要获取一个“绘图上下文”（Context），它是实际绘制的工具。最常用的上下文是 2D 上下文。

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

getContext("2d")：返回一个用于绘制 2D 图形的上下文对象。
对于 3D 绘制，可以使用 getContext("webgl")。

常用绘制操作

1. 矩形

// 填充矩形
ctx.fillStyle = "blue";  // 设置填充颜色
ctx.fillRect(10, 10, 150, 100);  // 绘制一个蓝色矩形

// 绘制边框矩形
ctx.strokeStyle = "red";  // 设置边框颜色
ctx.lineWidth = 5;        // 设置边框宽度
ctx.strokeRect(200, 10, 150, 100);  // 绘制一个红色边框矩形

fillRect(x, y, width, height)：绘制并填充一个矩形。
strokeRect(x, y, width, height)：绘制一个矩形的边框。
fillStyle：设置填充颜色。
strokeStyle：设置边框颜色。

2. 路径

// 开始绘制路径
ctx.beginPath();
ctx.moveTo(50, 50);  // 起点 (50, 50)
ctx.lineTo(200, 50); // 绘制到 (200, 50)
ctx.lineTo(200, 100); // 绘制到 (200, 100)
ctx.closePath(); // 关闭路径
ctx.strokeStyle = "green";  // 设置路径颜色
ctx.lineWidth = 3;  // 设置路径宽度
ctx.stroke();  // 绘制路径

beginPath()：开始一个新的路径。
moveTo(x, y)：设置路径的起始点。
lineTo(x, y)：绘制一条从当前点到指定点的直线。
closePath()：关闭当前路径，将最后一个点连接到起始点。
stroke()：绘制路径。
lineWidth：设置线条宽度。

3. 圆形

ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);  // (x, y, radius, startAngle, endAngle)
ctx.fillStyle = "orange";  // 设置填充颜色
ctx.fill();  // 填充圆形
ctx.stroke();  // 绘制圆形边框

arc(x, y, radius, startAngle, endAngle)：绘制圆形或弧形。
- x, y：圆心的坐标。
- radius：圆的半径。
- startAngle 和 endAngle：弧的起始角度和结束角度，使用弧度制（2 * Math.PI 表示一个完整的圆）。
fill()：填充圆形。
stroke()：绘制圆形边框。

4. 文本

ctx.font = "30px Arial";  // 设置字体
ctx.fillStyle = "black";  // 设置填充颜色
ctx.fillText("Hello, Canvas!", 50, 100);  // 绘制填充文本

ctx.strokeStyle = "red";  // 设置文本边框颜色
ctx.lineWidth = 2;        // 设置文本边框宽度
ctx.strokeText("Hello!", 50, 150);  // 绘制文本的边框

font：设置字体大小和字体类型。
fillText(text, x, y)：绘制填充文本。
strokeText(text, x, y)：绘制文本的边框。
fillStyle：设置文本填充颜色。
strokeStyle：设置文本边框颜色。

清除画布内容

有时候我们需要清除画布上的某些部分，可以使用 clearRect() 方法。

ctx.clearRect(10, 10, 100, 100);  // 清除画布上的矩形区域

clearRect(x, y, width, height)：清除画布指定区域的内容。

图像处理

通过 drawImage() 方法在 <canvas> 上绘制图像。

var img = new Image();
img.src = "image.jpg";  // 设置图片路径

img.onload = function() {
  ctx.drawImage(img, 0, 0);  // 将图片绘制到画布上，坐标 (0, 0)
};

drawImage(image, x, y)：将图片绘制到画布上的指定位置。
image 可以是图像对象、视频元素、或者其他 canvas 元素。

动画效果

通过使用 requestAnimationFrame()实现平滑的动画效果。结合 clearRect() 和图形绘制方法，可以实现动态动画。

var x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除画布
  ctx.fillStyle = "blue";
  ctx.fillRect(x, 50, 100, 100);  // 绘制一个矩形
  x += 2;  // 每帧移动矩形的位置

  if (x > canvas.width) {
    x = -100;  // 重置位置
  }

  requestAnimationFrame(animate);  // 请求下一帧动画
}

animate();  // 启动动画