Canvas 图形绘制的进阶应用——文本和图像

前言：
在canvas系列第一篇文章中，我们学习了canvas的基本知识和使用一些基础图形来绘制图形。然而，文本和图像在图形应用中是不可或缺的重要元素，它们可以使图形更具信息性和美观性。本文将介绍canvas中绘制文本和图像的方法，并通过一些实际例子来说明如何利用它们来创建更复杂的图形和界面。

一、canvas中绘制文本

1. fillText() 方法：
   fillText() 方法用于在指定的(x,y)位置填充指定的文本。它接受三个参数：

• text：要填充的文本。
• x：文本的起始位置的x坐标。
• y：文本的起始位置的y坐标。

注意： 绘制的最大宽度是可选的。如果指定了最大宽度，则文本将被截断以适应指定的宽度。

2. strokeText() 方法：
   strokeText() 方法用于在指定的(x,y)位置绘制文本边框。它接受三个参数：

• text：要填充的文本。
• x：文本的起始位置的x坐标。
• y：文本的起始位置的y坐标。

注意： 绘制的最大宽度是可选的。如果指定了最大宽度，则文本将被截断以适应指定的宽度。

3. font 属性：
   当前我们用来绘制文本的样式，该字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。可以设置font属性来改变文本的样式，例如：

ctx.font = "20px Arial";

注意： 以上设置将文本的字体设置为20px Arial。

4. textAlign 属性：
   文本对齐选项。可选值有：

• start：左对齐。
• end：右对齐。
• center：居中。
• left：左对齐。
• right：右对齐。

注意： 以上设置将文本的对齐方式设置为居中。

二、canvas中绘制图像

1. drawImage() 方法：
   drawImage() 方法用于在canvas上绘制图像。它接受四个参数：

• image：要绘制的图像对象。
• dx：图像的起始位置的x坐标。
• dy：图像的起始位置的y坐标。
• dw：图像的宽度。
• dh：图像的高度。

注意： 如果省略dw和dh，则图像的原始宽度和高度将被使用。

2. createPattern() 方法：
   createPattern() 方法用于创建一个图像图案。它接受一个图像对象作为参数，并返回一个图案对象。图案对象可以被用来填充形状或文本。

var pattern = ctx.createPattern(image, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 100);

注意： 以上设置将一个图像图案填充到一个矩形中。

三、实例演示

1. 绘制简单的文本：

ctx.font = "20px Arial";
ctx.fillText("Hello World", 10, 50);

2. 绘制文本边框：

ctx.font = "20px Arial";
ctx.strokeText("Hello World", 10, 50);

3. 绘制图像：

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 10, 10, 100, 100);
};
image.src = "image.png";

4. 绘制图像图案：

var image = new Image();
image.onload = function() {
  var pattern = ctx.createPattern(image, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 100, 100);
};
image.src = "image.png";

结语
本文介绍了canvas中绘制文本和图像的方法，并通过一些实际例子来说明如何利用它们来创建更复杂的图形和界面。掌握了这些方法，你就可以利用canvas来创建更丰富、更具互动性的图形应用了。