Canvas绘图基础第四部分：图片，阴影和文本信息

2023-11-18 09:37:10

Canvas绘图基础第四部分：图片、阴影和文本信息

在前面的文章中，我们已经学习了 Canvas 的基本绘图方法，包括绘制直线、矩形、圆形和椭圆。现在，我们将继续学习如何在 Canvas 中使用图片、阴影和文本信息。

1. 使用图片

Canvas 可以加载和显示图片，这为你的绘图提供了更加丰富的内容。你可以使用 drawImage() 方法来绘制图片，其语法如下：

drawImage(image, x, y, width, height);

其中：

image 是要绘制的图片对象。
x 和 y 是图片左上角的坐标。
width 和 height 是图片的宽和高。

例如，以下代码将在 Canvas 中绘制一张图片：

var image = new Image();
image.src = "myImage.png";

image.onload = function() {
  ctx.drawImage(image, 100, 100, 200, 200);
};

2. 使用阴影

阴影可以使你的图形更加立体和逼真。你可以使用 shadowBlur、shadowColor 和 shadowOffsetX、shadowOffsetY 属性来设置阴影。

shadowBlur 属性设置阴影的模糊程度，值越大，阴影越模糊。
shadowColor 属性设置阴影的颜色。
shadowOffsetX 和 shadowOffsetY 属性设置阴影的偏移量。

例如，以下代码将在 Canvas 中绘制一个带有阴影的矩形：

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

ctx.shadowBlur = 10;
ctx.shadowColor = "black";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

ctx.fillStyle = "white";
ctx.fillRect(100, 100, 200, 200);

3. 绘制文本信息

Canvas 还允许你绘制文本信息。你可以使用 fillText() 和 strokeText() 方法来绘制文本，其语法如下：

fillText(text, x, y);
strokeText(text, x, y);

其中：

text 是要绘制的文本。
x 和 y 是文本左上角的坐标。

fillText() 方法会使用填充色填充文本，而 strokeText() 方法会使用边框色绘制文本。

例如，以下代码将在 Canvas 中绘制一个带有阴影的文本：

ctx.fillStyle = "black";
ctx.fillText("Hello World", 100, 100);

ctx.shadowBlur = 10;
ctx.shadowColor = "red";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

ctx.fillStyle = "white";
ctx.fillText("Hello World", 100, 100);