1442702103@qq.com
1442702103@qq.com
  • 发布:2019-10-28 17:02
  • 更新:2019-12-30 17:55
  • 阅读:546

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

分类:uni-app

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 负责人:无 分享
已邀请:
asjl.chen@qq.com

asjl.chen@qq.com

同样的问题

su.derek@gmail.com
YXW

YXW

官方是不会理你的

su.derek@gmail.com

su.derek@gmail.com

那要到哪问?QQ群里也问了,没人回答啊

DCloud_UNI_WYQ

DCloud_UNI_WYQ

在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_UNI_WYQ

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

    2020-02-27 16:52

  • DCloud_UNI_WYQ

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

    2020-02-27 16:55

  • GraceLeeau

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

    2020-02-28 16:00

  • 1654688410@qq.com

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

    2020-03-14 15:46

  • DCloud_UNI_WYQ

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

    2020-03-14 18:31

pengmin55@126.com

pengmin55@126.com

这个程序确实很快速度了

821082714@qq.com

821082714@qq.com - 95后ti小白

同样问题

要回复问题请先登录注册