【报Bug】【紧急非常严重】canvas h5下绘制空白,一闪而过

分类：uni-app

canvas bug已修复

IDE运行环境说明

[HBuilderX]-[2.3.7.20191024]
H5平台

问题代码

代码就这些,页面渲染的时候,渲染成功的画布效果是一闪而过的,然后变空白的
官方demo,能显示是因为用的了定时器,

<template>  
    <view>  
        <canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>  
    </view>  
</template>  
<script>  
    var ctx = null;  
    export default {  
        onReady(e) {  
            // Draw coordinates  
           ctx = uni.createCanvasContext('myCanvas')  
           ctx.setFillStyle('red')  
           ctx.fillRect(10, 10, 150, 75)  
           ctx.draw()  
        },  
        methods: {  
            onDraw() {  
                const ctx = uni.createCanvasContext('myCanvas')  
               ctx.setFillStyle('red')  
               ctx.fillRect(10, 10, 150, 75)  
               ctx.draw()  
            }  
        }  
    }  
</script>

2019-10-28 17:02 负责人:无分享

7 个回复

a***@qq.com

同样的问题

同问

官方是不会理你的

那要到哪问？QQ群里也问了，没人回答啊

在onReady里使用的时候延迟一下再执行ctx.draw()

this.$nextTick(()=>{  
  ctx.draw()  
})

GraceLeeau

官方对uni中的canvas在H5端的这一表现，不解释一下吗？

如果不用ctx = uni.createCanvasContext(), 而用H5端的ctx = canvasEle.getContext('2d')，则 ctx.draw is not a function, 应该怎么解决此问题呢？

官方例子小球阵，H5端的代码，如不加 requestAnimationFrame(function() { animate(ballList) }) 也是会一闪而过。

还有动态设置canvas宽高，在H5端怎样的操作姿势才是正确的？问题链接

2020-02-27 13:34
DCloud_uniCloud_WYQ

回复 GraceLeeau: 因为canvas组件在初始化的时候经过计算重设了一下大小，而canvas这个元素有个特性就是，调整width或者height属性会导致canvas内容清空

2020-02-27 16:52
DCloud_uniCloud_WYQ

回复 DCloud_uniCloud_WYQ: 后续想想怎么优化这里

2020-02-27 16:55
GraceLeeau

回复 DCloud_uniCloud_WYQ: 好的，谢谢回复。这边调整canvas大小后，通过setTimeout延迟绘图操作，可解决绘图不出现问题。主要是uni中H5端调整canvas大小不适合用canvas.width, canvas.height，这一点希望可以在文档中有所提醒

2020-02-28 16:00
1***@qq.com

回复 DCloud_uniCloud_WYQ: 你们uni这个canvas好奇怪的，唉，目前一样是遇到跟楼主的问题，也是跟着楼主用的setTimeout方法，真难玩，写成组件方式又不行的，只能是页面上才可以的吗

2020-03-14 15:46
DCloud_uniCloud_WYQ

回复 1***@qq.com: 一闪消失的问题在2.6.3-alpha已修复，组件内获取canvasContext需要传入组件实例，https://uniapp.dcloud.io/api/canvas/createCanvasContext?id=createcanvascontext

2020-03-14 18:31