const ctx = uni.createCanvasContext("myCanvas");
uni.downloadFile({
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png',
success: (res) => {
const pattern = ctx.createPattern(res.tempFilePath, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 150);
ctx.draw();
}
});
jiojio213
- 发布：2020-09-04 16:00
- 更新：2021-08-05 21:54
- 阅读：893
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.8.8
浏览器平台： Chrome
浏览器版本： 84.0.4147.135
项目创建方式： HBuilderX
示例代码：
操作步骤：
文档示例代码
https://uniapp.dcloud.io/api/canvas/CanvasContext?id=canvascontextcreatepattern
文档示例代码
https://uniapp.dcloud.io/api/canvas/CanvasContext?id=canvascontextcreatepattern
预期结果：
重复元图像填充
重复元图像填充
实际结果：
黑色填充
黑色填充
bug描述：
API
CanvasContext.createPattern 无效
对指定的图像创建模式的方法，可在指定的方向上重复元图像
文档地址
https://uniapp.dcloud.io/api/canvas/CanvasContext?id=canvascontextcreatepattern
3 个回复
Tahath
同问，是还没解决吗
l***@cyberway.net.cn
请问大佬，你这个问题最后怎么处理的呢，我也是用uniapp做 H5，同样遇到createPattern方法不生效问题，我是用来画水印
傑丶 - wjj
坑啊，到现在也没人回应！！！