HTML5 画布秘籍
warning:
这篇文章距离上次修改已过225天，其中的内容可能已经有所变动。
在HTML5画布中，我们可以使用不同的方法来创建和使用图像。在这个系列的文章中，我们将讨论如何使用画布元素创建和使用图像。
在上一篇文章中，我们讨论了如何使用drawImage()方法将图像绘制到画布上。除此之外，我们还可以使用createPattern()方法来创建图案。
createPattern()方法接受两个参数：要重复的图像和用于指定该模式如何适应其放置区域的值。这个方法返回一个新的模式对象，我们可以用这个对象来填充绘图路径或者绘制区域。
下面是一个使用createPattern()方法创建图案并使用它填充矩形的例子：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = 'image.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, 300, 200);
ctx.fillStyle = pattern;
ctx.fill();
}
</script>
</body>
</html>在这个例子中，我们首先创建了一个新的Image对象并设置其源为image.png。然后，我们在图像加载完成后创建了一个模式对象，使用createPattern()方法，并设置模式为repeat。然后我们创建了一个矩形，并使用模式对象填充它。
这只是HTML5画布系列文章中的一个简单例子。画布提供了许多其他强大的功能，包括绘制路径、变换、颜色和图像的操作，我们将在未来的文章中逐一探讨。
评论已关闭