qq_37813237 2022-10-11 09:59 采纳率: 100%
浏览 295
已结题

vue+canvas第一次加载不显示

问题遇到的现象和发生背景

想使用vue+canvas,但是使用canvas后,第一次加载不显示,要刷新以后才显示。

用代码块功能插入代码,请勿粘贴截图
<template>
    <div id="app">
        <canvas id="mycanvas" width="500" height="500"></canvas>
    </div>
</template>
 
<script>
    export default {
        name: 'cvs',
        mounted() {
            this.draw();
            
        },
        methods: {
            draw() {
                window.onload = function() {
                    var c = document.getElementById("mycanvas");
                    var ctx = c.getContext("2d");
                    ctx.beginPath();
                    // ctx.moveTo(50,150);
                    // ctx.lineTo(350,150);
                    // ctx.strokeStyle = 'green';
                    // ctx.lineWidth = 5;
                    ctx.fillRect(100,200,300,400)
                    ctx.stroke();
                    ctx.closePath();
                };
            }
        }
    }
</script>
 
<style>
</style>

运行结果及报错内容

第一次加载

img


刷新后

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-10-11 10:29
    关注

    mounted后dom已经渲染到浏览器,不需要再window.onload

    
        export default {
            name: 'cvs',
            mounted() {
                this.draw();
    
            },
            methods: {
                draw() {
                    //window.onload = function() {
                        var c = document.getElementById("mycanvas");
                        var ctx = c.getContext("2d");
                        ctx.beginPath();
                        // ctx.moveTo(50,150);
                        // ctx.lineTo(350,150);
                        // ctx.strokeStyle = 'green';
                        // ctx.lineWidth = 5;
                        ctx.fillRect(100,200,300,400)
                        ctx.stroke();
                        ctx.closePath();
                   // };
                }
            }
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 崽崽的谷雨 2022-10-11 10:07
    关注

    draw里window.onload 去掉试试

    评论
  • 有问必答小助手 2022-10-11 11:08
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月19日
  • 已采纳回答 10月11日
  • 创建了问题 10月11日

悬赏问题

  • ¥15 编译arm板子的gcc
  • ¥20 C语言用栈实现无向图邻接矩阵广度优先遍历
  • ¥15 C++代码报错问题,c++20协程
  • ¥15 c++图Djikstra算法求最短路径
  • ¥15 Linux操作系统中的,管道通信问题
  • ¥15 ansible tower 卡住
  • ¥15 等间距平面螺旋天线方程式
  • ¥15 通过链接访问,显示514或不是私密连接
  • ¥100 系统自动弹窗,键盘一接上就会
  • ¥50 股票交易系统设计(sql语言)