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

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 谁知道这个咋搞的吗,有偿
  • ¥20 基于spring boot、的scorm
  • ¥15 往复密封问题的两个问题
  • ¥15 DAC函数和STM32
  • ¥15 任务是接收数据并把数据写入DAC7311,这些代码能实现此功能吗
  • ¥15 分析FP -Growth代码运行内存太大而无法运行的原因
  • ¥20 qtcreat 使用msvc编译器开发软件运行时字体锯齿感严重
  • ¥15 为何显示keyerror fruit
  • ¥15 imageware粗糙度表面
  • ¥15 为什么我的uibot导入py模块出错呀。py文件放在了uibot里对应的python文件夹了,卸了重安也不行