HTML5 Canvas 是一个强大的绘图工具，允许开发者在网页上进行动态图形绘制。在这个场景中，我们将探讨如何使用Canvas实现纹理填充与描边，也就是Fill 和 Stroke 的效果。
我们要了解基本的颜色填充与描边。`fillStyle` 属性用于设置当前图形的填充颜色，而`strokeStyle` 用于设置描边颜色。以下是一个简单的示例：
```javascript
// 设置字体和描边宽度
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
// 设置描边颜色为绿色
ctx.strokeStyle = 'green';
// 在(20, 100)位置绘制描边文本'Hello World!'
ctx.strokeText('Hello World!', 20, 100);
// 设置填充颜色为红色
ctx.fillStyle = 'red';
// 在相同位置绘制填充文本'Hello World!'
ctx.fillText('Hello World!', 20, 100);
```
接下来，我们进入更高级的主题——纹理填充与描边。Canvas 支持使用图像作为填充模式，这称为纹理填充。我们可以使用`createPattern`方法创建一个图案对象，将图像源（imageTexture）和重复模式（repeat 方式）作为参数传递。重复模式可以是 'repeat-x', 'repeat-y', 'repeat', 或 'no-repeat'，分别表示沿X轴、Y轴、两者或都不重复。以下是一个例子：
```javascript
// 创建纹理图案
var woodfill = ctx.createPattern(imageTexture, "repeat");
// 使用纹理图案进行描边
ctx.strokeStyle = woodfill;
ctx.strokeText('Hello World!', 20, 200);
// 使用纹理图案填充矩形
ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440);
```
在上面的代码中，`imageTexture` 应该是已经加载的图像资源，例如来自 `img` 标签的 `src` 或通过 `Image` 对象加载的图像。纹理填充可以让我们的图形具有更多样化的视觉效果。
为了查看实际效果，这些代码通常会放在HTML文档的 `window.onload` 事件处理函数内，确保所有资源都已加载完毕再执行绘图操作。完整的HTML代码可能如下所示：
```html
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<title>Canvas Fill And Stroke Text Demo</title>
<style>
/* Your CSS styles */
</style>
</head>
<body>
<canvas id="text_canvas"></canvas>
<script>
var ctx = document.getElementById("text_canvas").getContext("2d");
// Load image and create pattern
var img = new Image();
img.src = "path/to/your/image.png";
img.onload = function() {
var woodfill = ctx.createPattern(img, "repeat");
// Continue with your drawing code using the woodfill pattern
};
</script>
</body>
</html>
```
在这个例子中，我们先创建了一个`Image`对象，设置了它的`src`属性，然后在`onload`事件中创建纹理模式并进行绘制。这样，当图像加载完成后，Canvas 就可以使用纹理进行填充和描边了。
总结来说，HTML5 Canvas 提供了丰富的图形绘制功能，包括颜色填充、描边以及纹理填充和描边。这些功能使得开发者可以创建出各种复杂的图形和动画效果，极大地扩展了Web应用的交互性和视觉表现力。
