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 相关文章推荐
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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实例分享之mysql数据备份
2014/05/19 PHP
PHP实现合并discuz用户
2015/08/05 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
护理学毕业生自荐信
2013/10/02 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
学校万圣节活动方案
2014/02/13 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
公司承诺书怎么写
2014/05/24 职场文书
个人剖析材料范文
2014/09/30 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
病人慰问信范文
2015/02/15 职场文书
后勤个人工作总结
2015/02/28 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
捐书活动倡议书
2015/04/27 职场文书
检讨书格式范文
2015/05/07 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS