Canvas画布渲染不出来的问题解决

2023-12-05 15:10:02 腿子代码了

问题再现

学习Canvas的时候，打算描绘一个矩形并测试清除画布方法时，当编写完基本的canvas代码时，发现！画布内的矩形无法显示出来。
代码如下

<style>
    #mycanvas{
        width: 500px;
        height: 500px;
        display: block;
        border: 1px solid black;
        margin: 0 auto ;
    }
</style>
<body>
    <canvas id="mycanvas"> </canvas>
</body>
<script>
    var canvas =document.querySelector('#mycanvas');
    var ct =canvas.getContext('2d');
    ct.fillStyle='red'
    ct.fillRect(200,200,200,200);
</script>

显示如下

我的矩形呢！！！😶
于是开始排除错误

是否为书写错误（单词书写错误）

解决方法：在浏览器打印台观察有无报错，或者查看变量名是否书写正确，方法是否使用正确。

不是不是

修改删除测试等等等，终于发现了问题所在

错误原因

⭐错误原因

<body>
    <canvas id="mycanvas"> </canvas>
</body>

问题就出现了这里，没有为canvas画布添加长宽

当然会疑问
我这个位置不是添加了吗？而且画布的边框也显示出来了，为何内容却没显示出。

<style>
    #mycanvas{
        width: 500px;
        height: 500px;
        display: block;
        border: 1px solid black;
        margin: 0 auto ;
    }

目前也不知为何
就是一个神奇的现象，请知道的小伙伴评论区告诉我一声

解决方法

在canvas属性标签中添加width和height属性就可以解决了

<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>   
</body>

效果

到此这篇关于Canvas画布渲染不出来的问题解决的文章就介绍到这了,更多相关Canvas画布渲染不出来内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！