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 07 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
ExtJS 入门
2010/10/29 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python机器学习之决策树分类详解
2017/12/20 Python
python文本数据相似度的度量
2018/03/12 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python中six模块基础用法
2019/12/08 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
css sprite简单实例
2016/05/23 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
出纳岗位职责
2013/11/09 职场文书
社区十八大感言
2014/01/19 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
消防验收申请报告
2015/05/15 职场文书
护士心得体会范文
2016/01/25 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL