HTML5 Canvas绘制文本及图片的基础教程

HTML5 Canvas是一种Web绘图标准，它允许我们以编程方式绘制2D图形和动画。其中，绘制文本和图片也是非常常见的需求，下面我们就来详细讲解“HTML5 Canvas绘制文本及图片的基础教程”。

基本准备

在使用Canvas绘制文本和图片之前，需要先在HTML页面中添加一个Canvas元素，如下：

<canvas id="myCanvas" width="500" height="500"></canvas>

此外，还需要一些JavaScript代码来获取该画布元素，并在其中进行绘制操作，如下：

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

其中，getContext('2d')方法表示该画布是2D绘制类型，可以在其中进行2D图形绘制操作。

绘制文本

在HTML5 Canvas中，绘制文本有以下方法：

1. fillText()

该方法用于在画布上绘制填充的文本，语法如下：

context.fillText(text, x, y, maxWidth);

其中，参数含义如下：

• text：要绘制的文本内容。
• x：绘制文本的X轴坐标。
• y：绘制文本的Y轴坐标。
• maxWidth（可选）：最大宽度，文本超出该宽度时自动换行。

示例代码：

context.font = '30px Arial';
context.fillStyle = 'red';
context.fillText('Hello Canvas!', 50, 50);

2. strokeText()

该方法用于在画布上绘制描边的文本，语法如下：

context.strokeText(text, x, y, maxWidth);

参数含义同fillText()方法。

示例代码：

context.font = '30px Arial';
context.strokeStyle = 'blue';
context.strokeText('Hello Canvas!', 50, 100);

绘制图片

在HTML5 Canvas中，绘制图片有以下方法：

1. drawImage()

该方法用于在画布上绘制图像（一般为图片），语法如下：

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

其中，参数含义如下：

• image：要绘制的图片对象。
• sx（可选）：剪切图像的x坐标起点。
• sy（可选）：剪切图像的y坐标起点。
• sWidth（可选）：剪切图像的宽度。
• sHeight（可选）：剪切图像的高度。
• dx：绘制图像的x坐标起点。
• dy：绘制图像的y坐标起点。
• dWidth（可选）：绘制图像的宽度。
• dHeight（可选）：绘制图像的高度。

示例代码：

const img = new Image();
img.src = 'myImage.png';
img.onload = function() {
  context.drawImage(img, 50, 150);
}

2. createPattern()

该方法用于创建一个指定的图像模式，可以在之后的绘制操作中重复使用，语法如下：

context.createPattern(image, 'repeat|repeat-x|repeat-y|no-repeat');

其中，参数含义如下：

• image：要用作模式的图片对象。
• 'repeat|repeat-x|repeat-y|no-repeat'：模式的重复方式，可选值为repeat、repeat-x、repeat-y、no-repeat。

示例代码：

const img = new Image();
img.src = 'myImage.png';
img.onload = function() {
  const pattern = context.createPattern(img, 'repeat');
  context.fillStyle = pattern;
  context.fillRect(50, 200, 200, 200);
}

以上就是“HTML5 Canvas绘制文本及图片的基础教程”的完整攻略。