本人本来刚入小程序的坑,公司就来一波需求说: 希望 我前期开发出小程序后 后期还要开发出一套一模一样的H5 出来 ,what?
好的 于是乎 我用了 taro 但是react 我不是很熟悉,开发有点吃力,为了节约时间 后来放弃,选择跳入基于vue的 uniapp 这个坑 ,一来我就遇到很多问题:比如图片怎么也不不显示啊,组件嵌套不能canvas不能显示啊,传值出现问题啊 等等.而本文 我要记录的是 关于canvas的问题.
首先提出几个值得关注问题:
- 组件嵌套,在子组件中不能使用canvas ,也不是说不能,只能说使用了也没用,H5中显示无果,小程序一样.(我在uniapp社区提出这个bug ,但是我看有人在今年的6.7月份也提出过,但至今为止没有解决这个问题)
- 在H5中 出现canvas闪烁的问题 ,就一定要用异步去显示canvas,
- 绘制canvas 时 得用uniapp 中的draw()去绘制,不然 不会显示(原生一般直接填充就完事了)
- 一定要在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跟小程序