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制作精致的照片墙特效
Jun 07 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 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的mysqli_sqlstate()函数讲解
2019/01/23 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
js 学习笔记(三)
2009/12/29 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
python 如何在测试中使用 Mock
2021/03/01 Python
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
电脑教师的自我评价
2013/12/18 职场文书
青春寄语大全
2014/04/09 职场文书
保护环境倡议书300字
2014/05/19 职场文书
中层干部考核评语
2015/01/04 职场文书
初三语文教学反思
2016/03/03 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
python神经网络ResNet50模型
2022/05/06 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android