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

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();
                   // };
                }
            }
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 vb6.0使用jmail接收smtp邮件并另存附件到D盘
  • ¥30 vb net 使用 sendMessage 如何输入鼠标坐标
  • ¥15 关于freesurfer使用freeview可视化的问题
  • ¥100 谁能在荣耀自带系统MagicOS版本下,隐藏手机桌面图标?
  • ¥15 求SC-LIWC词典!
  • ¥20 有关esp8266连接阿里云
  • ¥15 C# 调用Bartender打印机打印
  • ¥15 我这个代码哪里有问题 acm 平台上显示错误 90%,我自己运行好像没什么问题
  • ¥50 C#编程中使用printDocument类实现文字排版打印问题
  • ¥15 找会编程的帅哥美女 可以用MATLAB里面的simulink编程,用Keil5编也可以。