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实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
使用CSS设置滚动条样式
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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
CI框架附属类用法分析
2018/12/26 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
js面向对象编程总结
2017/02/16 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
python文件操作整理汇总
2014/10/21 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
大一自我鉴定范文
2013/10/04 职场文书
客服主管岗位职责
2013/12/13 职场文书
干部选拔任用方案
2014/05/26 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android