关于uniapp 中使用canvas 的坑 H5不显示问题

本人本来刚入小程序的坑,公司就来一波需求说: 希望 我前期开发出小程序后 后期还要开发出一套一模一样的H5 出来 ,what?

好的 于是乎 我用了 taro 但是react 我不是很熟悉,开发有点吃力,为了节约时间 后来放弃,选择跳入基于vue的 uniapp 这个坑 ,一来我就遇到很多问题:比如图片怎么也不不显示啊,组件嵌套不能canvas不能显示啊,传值出现问题啊 等等.而本文 我要记录的是 关于canvas的问题.

首先提出几个值得关注问题:

1. 组件嵌套,在子组件中不能使用canvas ,也不是说不能,只能说使用了也没用,H5中显示无果,小程序一样.(我在uniapp社区提出这个bug ,但是我看有人在今年的6.7月份也提出过,但至今为止没有解决这个问题)
2. 在H5中 出现canvas闪烁的问题 ,就一定要用异步去显示canvas,
3. 绘制canvas 时  得用uniapp 中的draw()去绘制,不然 不会显示(原生一般直接填充就完事了)
4. 一定要在onReady函数中进行实例化canvas并且绘制 

 

下面 我的一个需求是 实现温度显示 

      

<template>
	<view class="">
        <view style="margin:0 auto;width: 200px;padding-left: 10px;">
           <canvas style="width:  200px;; height: 200px;border: #007AFF solid 1rpx;" canvas-id="myCanvas" id="myCanvas"></canvas>
        </view>
</view>

</template>


<script>
export default {

	onReady() {
	    this.initCanvas()
	},

	data() {
		return {
			wendu:16
		}
	},
	methods: {
		/*初始化画布*/
		initCanvas() {
			const ctx = uni.createCanvasContext('myCanvas',this)
			ctx.beginPath();
			ctx.arc(100,100,60,0.7*Math.PI,0.30*Math.PI);
			ctx.createLinearGradient(0,0,170,0);
			/* 渐变 */
			const grd=ctx.createLinearGradient(0,0,170,0);
			grd.addColorStop("0.7","#09C4D5");
			grd.addColorStop(1,"#07D2B8");
			ctx.strokeStyle = grd;
			ctx.lineWidth = 8;
			/* 字体 */
			ctx.font="40px Arial";		//设置字体大小
			ctx.fillStyle = '#09C4D5';//fillStyle填充颜色
			ctx.fillText("16",73,110); //fillText("字体",x,y)
			ctx.font="20px Arial"	
			ctx.fillStyle = 'gray';
			ctx.fillText("℃",115,88);
			ctx.font="12px Arial"
			ctx.fillStyle = 'gray';
			ctx.fillText("室内温度",77,130);
			/* 阴影 */
			ctx.shadowBlur=2;
			ctx.shadowColor="#09C4D5";
			setTimeout(function(){	//必须延迟执行 不然H5不显示
				ctx.stroke();
				ctx.draw()		//必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示
			 },200) 
		},
	},

</script>

 

 

然后 这是实现的效果:H5跟小程序