您的位置：首页 > Web前端 > HTML5

html5 canvas fillRect坐标和大小的问题解决方法

2014-03-26 17:03 477 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航