在微信小程序的 Canvas 绘图中,createPattern 方法用于创建一个图案样式,该图案可以作为填充或描边的样式应用到图形上。

以下是一个简单的示例,演示了如何使用 createPattern 方法:
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');

    // 创建一个图案样式
    const image = '/images/pattern.jpg'; // 图片路径,需要替换为你自己的图片路径
    const pattern = ctx.createPattern(image, 'repeat');

    // 设置填充样式为图案
    ctx.setFillStyle(pattern);

    // 绘制一个矩形,并填充图案
    ctx.fillRect(20, 20, 150, 100);

    // 绘制到 canvas 上
    ctx.draw();
  }
});

在这个示例中,我们首先使用 createPattern 方法创建了一个图案样式,其中的 image 变量是一个图片的路径,你需要将它替换为你自己的图片路径。第二个参数 'repeat' 表示图案会在水平和垂直方向上重复。

然后,我们使用 setFillStyle 设置填充样式为创建的图案,接着使用 fillRect 方法绘制了一个矩形,并填充了图案。

请确保图片路径是相对于小程序根目录的相对路径,并且小程序的配置文件中(app.json)已经配置了相应的图片资源。




转载请注明出处:http://www.zyzy.cn/article/detail/1014/微信小程序