微信小程序子组件使用canvas无效，线条画不出颜色

最新推荐文章于 2024-08-26 10:30:45 发布

Mr. Yang`

最新推荐文章于 2024-08-26 10:30:45 发布

阅读量2k

点赞数 1

分类专栏：微信小程序文章标签：小程序 canvas

本文链接：https://blog.csdn.net/weixin_43374226/article/details/110524131

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

微信小程序子组件使用canvas无效，线条画不出颜色

小程序中在page中直接使用canvas是这样使用的：

// canvas 全局配置
var context = null;
Page({
	data: {},
	onLoad:function(){
		// 使用 wx.createContext 获取绘图上下文 context
		  context = wx.createCanvasContext('canvas');
		  context.beginPath()
		  context.setStrokeStyle('#000000');
		  context.setLineWidth(4);
		  context.setLineCap('round');
		  context.setLineJoin('round');
		  context.draw();
	},
})

但是在子组件使用时，canvas线条的绘画失败，是线条的颜色设置没有成功，后发现原因如下：

canvas组件注册无效，这个因为createCanvasContext方法在page页面默认传了一个this，在组件里面需要手动传this。同时生成画布的时候wx.canvasToTempFilePath也要传入this,如下面的代码

context = wx.createCanvasContext('canvas',this);

wx.canvasToTempFilePath({
	canvasId：'canvas',
	fileType: 'png',
	success: function(res) {	},
	fail:(e)=>{}
},this)