这是我参与「第五届青训营 」伴学笔记创作活动的第 三 天

今天分享关于canvas中的createPattern()方法

1. 图案样式createPattern(image, type)

createPattern(image, type)

• Image 是重复图像源，可以是<img>``<video>``<canvas>等

• Type 必须是下面的字符串值之一：repeat（默认值），repeat-x，repeat-y 和 no-repeat。

• 此方法返回一个CanvasPattern对象。

使用方法：

将模式赋值给fillStyle，再使用fillRect() 方法将其绘制出来。

下面展示一个简单的例子：

<script type="text/javascript">
        //1.找到画布
        const canvas = document.getElementById("canvas");
        //2.获取画笔，上下文对象
        const ctx = canvas.getContext("2d");

        //3.创建图案样式pattern
        var img = new Image();
        img.src = './img/bed.png';

        img.onload = function(){
            //创建图案对象createPattern(图片对象img或canvas，重复方式repeat,no-repeat,repeat-x,repeat-y)
            var pattern = ctx.createPattern(img,'repeat');
            ctx.fillStyle = pattern;
            ctx.fillRect(0,0,600,400);
        }
 </script>

实现效果如下：

如果说，你想对图片进行放大缩小等操作，可以使用pattern的setTransform(matrix)方法

setTransform(matrix)

setTransform()  方法使用 SVGMatrix对象作为图案的变换矩阵，并在此图案上调用它。

• matrix：SVGMatrix ，被用作图案的变换矩阵。

使用方法：

1. 先在<canvas>下增加一个<svg>标签
2. 在JavaScript中获取<svg>并创建一个SVGMatrix矩阵对象
3. 在将pattern对象赋值给fillStyle前使用

下面展示一个简单的例子：

<canvas id="canvas" width="420" height="510"></canvas>
    <svg id="svg1"></svg>

    <script type="text/javascript">
      //1.找到画布
      const canvas = document.getElementById("canvas");
      //2.获取画笔，上下文对象
      const ctx = canvas.getContext("2d");

      var svg1 = document.getElementById("svg1");
      var matrix = svg1.createSVGMatrix();

      //3.获取图片
      var img = new Image();
      img.src = "./img/bed.png";

      img.onload = function () {
        var pattern = ctx.createPattern(img, "repeat");
        pattern.setTransform(matrix.scale(0.2));
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, 420, 510);
      };
    </script>

实现效果如下：

pattern.setTransform(matrix.scale(0.2));还可以加上旋转等。

如：pattern.setTransform(matrix.rotate(-30).scale(0.2));

实现效果如下：