Canvas画布渲染不出来的问题解决方法_F11 - 专业站长和开发者的学习网站

分享到

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

html5 来源：互联网作者：佚名发布时间：2023-12-18 21:37:39 人浏览

摘要

学习Canvas的时候，打算描绘一个矩形并测试清除画布方法时，当编写完基本的canvas代码时，发现！画布内的矩形无法显示出来。代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 style #mycanv

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

<style>

#mycanvas{

width: 500px;

height: 500px;

display: block;

border: 1px solid black;

margin: 0 auto ;

}

</style>

<body>

</body>

var canvas =document.querySelector('#mycanvas');

var ct =canvas.getContext('2d');

ct.fillStyle='red'

ct.fillRect(200,200,200,200);

</script>

显示如下

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

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

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

不是不是

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

错误原因

?错误原因

<body>

</body>

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

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

<style>

#mycanvas{

width: 500px;

height: 500px;

display: block;

border: 1px solid black;

margin: 0 auto ;

}

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

解决方法

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

<body>

</body>

效果

您可能感兴趣的文章 :

原文链接 :

Tag : Canvas(63)

HTML5键盘弹起遮挡输入框的解决方法介绍

混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体
Canvas画布渲染不出来的问题解决方法

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

具体如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
HTML5标签正确的使用方式介绍

1.主体内容和隐藏方式 1.1 main 标签 ???? 构建主要内容 main标签代表网页的主要内容。通过为主要内容提供清晰的结构，它对提高网页的可访问
elementUI中el-date-picker如何禁用指定日期之前或之后

一、elementUI中el-date-picker禁用指定日期之前或之后的日期通过配置picker-options配置指定禁用日期（pickerOptions写到data里面） 1 2 3 4 5 6 7 8 9 el
HTML5实现同时选择多个文件夹上传的使用介绍

HTML5的上传API可以支持同时选择多个文件和选择单个文件夹，但不支持同时选择多个文件夹。如果想同时选择多个文件夹，那只能另辟蹊径，
使用H5实现短信验证码一键登录功能

一、技术栈 uniapp+vue3+javascript 二、实现的效果全部代码可见：https://github.com/zzm319/study-summarize.git（分支为code-login）。 1、进入页面第一个输
H5使用Vant自适应布局(postcss-pxtorem)介绍

1、安装 postcss-pxtorem 1 npm install postcss postcss-pxtorem --save-dev 2、在根目录新建postcss.config.js，配置 postcss-pxtorem 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1
html中ul和li标签的用法介绍

普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的
HTML5 Web Worker(多线程处理)介绍

概述 JavaScript的执行环境是单线程的，也就是一次只能执行一个任务。如果遇到多个任务时，只能排队依次执行。在HTML5中，可以使用Web W