Canvas画布渲染不出来的问题解决
发布时间：2023-12-05 15:10:02 作者：腿子代码了 
我要评论
我要评论学习Canvas的时候，打算描绘一个矩形并测试清除画布方法时，但是发现画布渲染不出来，本文就来介绍一下该问题的解决，具有一定的参考价值，感兴趣的可以了解一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
问题再现
学习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画布渲染不出来内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了清除canvas画布内容(点擦除+线擦除)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-08-12
这篇文章主要介绍了canvas画布实现手写签名效果的示例代码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随2019-04-23- 这篇文章主要介绍了canvas学习笔记之2d画布基础的实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-21
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
这篇文章主要介绍了canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来2019-01-18
这篇文章主要介绍了h5使用canvas画布实现手势解锁的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-04- 本篇文章主要介绍了html5清空画布方法（三种），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-16
- 这篇文章主要介绍了HTML5 画布canvas使用方法，canvas 是一个矩形区域，可以控制其每一像素，介绍了canvas的多种功能，感兴趣的小伙伴们可以参考一下2016-03-18
- html5的canvas很强大利用其画布可轻松绘制贝塞尔曲线，为大家以后使用方便，特于此分享实现代码，有此需求的朋友可以参考下2013-08-14
html5的画布canvas——画出简单的矩形、三角形实例代码
有两种形式，一种是描边（fill），一种是填充（stroke），具体的实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-09html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，首先认识一下画圆的坐标：中心、起始角、结束角；接下来的就很简单了2013-06-09
最新评论