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教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 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判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
详解Python字符串对象的实现
2015/12/24 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
用Python配平化学方程式的方法
2019/07/20 Python
python实现KNN分类算法
2019/10/16 Python
python创建学生成绩管理系统
2019/11/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
钳工实习自我鉴定
2013/09/19 职场文书
策划创业计划书
2014/02/06 职场文书
请假条怎么写
2014/04/10 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
党在我心中演讲稿
2014/09/02 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Redis基本数据类型List常用操作命令
2022/06/01 Redis
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis