html5 canvas fillRect坐标和大小的问题解决方法


Posted in HTML / CSS onMarch 26, 2014

fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高。

今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。

错误的方式1:

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mycanvas{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<canvas id='mycanvas' ></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>

错误的方式2:
复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id='mycanvas' style='width:200px;height:200px;background:yellow'></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>

显示结果:

正确的方式:

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id='mycanvas' width='200px' height='200px' style='background:yellow'></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
用html5实现语音搜索框的方法
Mar 18 #HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 #HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 #HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 #HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 #HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 #HTML / CSS
You might like
PHP的历史和优缺点
2006/10/09 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python读取xlsx的方法
2018/12/25 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
上课睡觉检讨书
2014/01/28 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
请假条范文大全
2014/04/10 职场文书
责任心演讲稿
2014/05/14 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python