说说在 Canvas 中如何用图片来填充形状

川长思鸟来 2022-12-12 13:46 235阅读 0赞

context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 `context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");`。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>image</td> 
   <td>要使用的图片、画布或视频元素。</td> 
  </tr> 
  <tr> 
   <td>repeat</td> 
   <td>默认值，表示在水平和垂直方向重复。</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>表示在水平方向重复。</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>表示在垂直方向重复。</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>表示只显示一次（不重复）。</td> 
  </tr> 
 </tbody> 
</table>

假设有一张图片，我们只用这张图片来填充正方形，图片存储为 girl.jpg。

![03c80cc17d926533281a22d80a933e12.png][]

*该图片来源于网络。*

Steve Fulton 与 Jeff Fulton 举了一个图片填充的示例（做了改写）。

var fillImg = new Image();
    fillImg.src = 'girl.jpg';
    fillImg.onload = function () {
        context.fillStyle = context.createPattern(fillImg, 'repeat');
        context.fillRect(0, 0, 600, 600);
    }

运行结果：

![65d3bcf4b53c4c69618517b4dabb8347.png][]

首先创建了一个 Image() 对象，并设定好图片地址；接着定义 onload 事件，平铺放置该图片。

也可以选择不平铺（no-repeat）、y 轴平铺（repeat-y）或者 x 轴平铺（repeat-x）。

context.fillStyle = context.createPattern(fillImg, 'no-repeat');
    context.fillRect(0, 0, 200, 200);
    
    context.fillStyle = context.createPattern(fillImg, 'repeat-y');
    context.fillRect(0, 220, 200, 580);
    
    context.translate(210,400);
    context.fillStyle=context.createPattern(fillImg, 'repeat-x');
    context.fillRect(0, 0, 580, 200);

运行结果：

![b69651c4ae4c2df97cc17cb4a6c165b5.png][]

这里为了凸显出 repeat-x 效果，通过 context.translate() 方法把图片先移动到 (210,400）作为 fillRect() 方法的原点坐标。

[03c80cc17d926533281a22d80a933e12.png]: /images/20221123/a577b8a5f2df41daa2ede5d3d4d42801.png
[65d3bcf4b53c4c69618517b4dabb8347.png]: /images/20221123/569282a7b9e1412789388f676610e391.png
[b69651c4ae4c2df97cc17cb4a6c165b5.png]: /images/20221123/1f46e2b900104d919a991f88987afcab.png