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截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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生成二维码的两种方法(带logo图像)
2014/03/14 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
详谈js模块化规范
2017/07/07 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
微信小程序实现点赞业务
2021/02/10 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
python实现视频压缩功能
2020/12/18 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
教师自荐书
2013/10/08 职场文书
降消项目实施方案
2014/03/30 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
公司合并协议书范本
2014/09/30 职场文书
毕业实习单位意见
2015/06/04 职场文书
婚宴致辞
2015/07/28 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers