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 18 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP中phar包的使用教程
2017/06/14 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python字符串处理实例详解
2017/05/18 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
汉语言文学职业规划
2014/02/14 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
文明市民先进事迹
2014/05/15 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书