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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
css3 border-radius属性详解
Jul 05 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
html实现弹窗的实例
Jun 09 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
javascript 函数速查表
2010/02/07 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python2随机数列生成器简单实例
2017/09/04 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python自动发微信监控报警
2019/09/06 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python如何调用java类
2020/07/05 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
摄影实习自我鉴定
2013/09/20 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python