16、Canvas绘图：从基础到高级技巧

Canvas绘图：从基础到高级技巧

1. 图案填充与图像平铺

图案填充允许对图像进行平铺（或重复）操作。通过 createPattern(...) 方法可以实现这一功能，该方法的第二个参数是一个字符串，用于控制平铺方式。目前，唯一被一致支持的平铺值是 repeat ，它默认会在水平和垂直方向上重复图像。示例代码如下：

var img = document.getElementById("my_fish_image");
var imgfill = mycontext.createPattern(img, "repeat");
mycontext.fillStyle = imgfill;
mycontext.fillRect(0, 0, 200, 200);

2. 引入外部图像到Canvas

在某些情况下，我们需要将外部的图像（如图片、图标、照片等）引入到Canvas元素中，以便使用Canvas API的绘图命令对其进行操作或修饰。
- 具体步骤 ：
1. 加载图像：可以通过在标记中使用 <img> 标签加载图像并获取其引用，也可以在JavaScript代码中动态创建 Image 元素。示例代码如下：

var img = new Image();
img.src = "http://somewhe