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 media 响应式布局的简单实例
Aug 03 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript 的继承
2011/10/01 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
js实现简单的秒表
2020/01/16 Javascript
Vue3为什么这么快
2020/09/23 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
求网格中的黑点分布
2013/11/06 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
银行出纳岗位职责
2013/11/25 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
硕士生工作推荐信
2014/03/07 职场文书
房屋租赁协议书
2014/10/18 职场文书
党支部先进事迹材料
2014/12/24 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript