Canvas 上的文本与图像：提升您的绘图能力

2023-12-04 05:58:26

在 Canvas 上作画时，文本和图像元素是不可或缺的，它们为您的创作增添了丰富性和吸引力。本文将深入探讨如何利用 Canvas API 在您的绘图中插入文本和图像，从而提升您的绘图技能。

插入文本

Canvas 提供了一种简洁的方法，即 fillText() 方法，用于在绘图中插入文本。该方法接受三个必填参数：

text： 要插入的文本字符串
x：文本开始绘制的水平坐标
y：文本开始绘制的垂直坐标

还可以指定一个可选的第四个参数，即 maxWidth，它限制了文本的宽度，以防止其溢出指定的边界。

代码示例：

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

ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);

插入图像

要将图像插入 Canvas，可以使用 drawImage() 方法。该方法接受三个必填参数：

image： 要插入的图像对象
x：图像开始绘制的水平坐标
y：图像开始绘制的垂直坐标

还可以指定两个可选参数，即 width 和 height，它们指定图像的绘制宽度和高度。

代码示例：

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

const image = new Image();
image.onload = () => {
  ctx.drawImage(image, 10, 10);
};
image.src = "myImage.png";