点评:今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对
fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高。
bYvHTML5中文学习网 - HTML5先行者学习网bYvHTML5中文学习网 - HTML5先行者学习网今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。
bYvHTML5中文学习网 - HTML5先行者学习网bYvHTML5中文学习网 - HTML5先行者学习网错误的方式1:
bYvHTML5中文学习网 - HTML5先行者学习网 bYvHTML5中文学习网 - HTML5先行者学习网
<!doctype html> bYvHTML5中文学习网 - HTML5先行者学习网
<html lang="en"> bYvHTML5中文学习网 - HTML5先行者学习网
<head> bYvHTML5中文学习网 - HTML5先行者学习网
<meta charset="UTF-8"> bYvHTML5中文学习网 - HTML5先行者学习网
<title>Document</title> bYvHTML5中文学习网 - HTML5先行者学习网
<style> bYvHTML5中文学习网 - HTML5先行者学习网
#mycanvas{ bYvHTML5中文学习网 - HTML5先行者学习网
width: 200px; bYvHTML5中文学习网 - HTML5先行者学习网
height: 200px; bYvHTML5中文学习网 - HTML5先行者学习网
background: yellow; bYvHTML5中文学习网 - HTML5先行者学习网
} bYvHTML5中文学习网 - HTML5先行者学习网
</style> bYvHTML5中文学习网 - HTML5先行者学习网
</head> bYvHTML5中文学习网 - HTML5先行者学习网
<body> bYvHTML5中文学习网 - HTML5先行者学习网
<canvas id='mycanvas' ></canvas> bYvHTML5中文学习网 - HTML5先行者学习网
<script> bYvHTML5中文学习网 - HTML5先行者学习网
var c = document.getElementById('mycanvas'); bYvHTML5中文学习网 - HTML5先行者学习网
var ctx = c.getContext("2d"); bYvHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle='#f36'; bYvHTML5中文学习网 - HTML5先行者学习网
ctx.fillRect(100, 100, 100, 100); bYvHTML5中文学习网 - HTML5先行者学习网
</script> bYvHTML5中文学习网 - HTML5先行者学习网
</body> bYvHTML5中文学习网 - HTML5先行者学习网
</html> bYvHTML5中文学习网 - HTML5先行者学习网
bYvHTML5中文学习网 - HTML5先行者学习网错误的方式2:
bYvHTML5中文学习网 - HTML5先行者学习网 bYvHTML5中文学习网 - HTML5先行者学习网
<!doctype html> bYvHTML5中文学习网 - HTML5先行者学习网
<html lang="en"> bYvHTML5中文学习网 - HTML5先行者学习网
<head> bYvHTML5中文学习网 - HTML5先行者学习网
<meta charset="UTF-8"> bYvHTML5中文学习网 - HTML5先行者学习网
<title>Document</title> bYvHTML5中文学习网 - HTML5先行者学习网
</head> bYvHTML5中文学习网 - HTML5先行者学习网
<body> bYvHTML5中文学习网 - HTML5先行者学习网
<canvas id='mycanvas' style='width:200px;height:200px;background:yellow'></canvas> bYvHTML5中文学习网 - HTML5先行者学习网
<script> bYvHTML5中文学习网 - HTML5先行者学习网
var c = document.getElementById('mycanvas'); bYvHTML5中文学习网 - HTML5先行者学习网
var ctx = c.getContext("2d"); bYvHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle='#f36'; bYvHTML5中文学习网 - HTML5先行者学习网
ctx.fillRect(100, 100, 100, 100); bYvHTML5中文学习网 - HTML5先行者学习网
</script> bYvHTML5中文学习网 - HTML5先行者学习网
</body> bYvHTML5中文学习网 - HTML5先行者学习网
</html> bYvHTML5中文学习网 - HTML5先行者学习网
bYvHTML5中文学习网 - HTML5先行者学习网显示结果:
bYvHTML5中文学习网 - HTML5先行者学习网bYvHTML5中文学习网 - HTML5先行者学习网正确的方式:
bYvHTML5中文学习网 - HTML5先行者学习网 bYvHTML5中文学习网 - HTML5先行者学习网
<!doctype html> bYvHTML5中文学习网 - HTML5先行者学习网
<html lang="en"> bYvHTML5中文学习网 - HTML5先行者学习网
<head> bYvHTML5中文学习网 - HTML5先行者学习网
<meta charset="UTF-8"> bYvHTML5中文学习网 - HTML5先行者学习网
<title>Document</title> bYvHTML5中文学习网 - HTML5先行者学习网
</head> bYvHTML5中文学习网 - HTML5先行者学习网
<body> bYvHTML5中文学习网 - HTML5先行者学习网
<canvas id='mycanvas' width='200px' height='200px' style='background:yellow'></canvas> bYvHTML5中文学习网 - HTML5先行者学习网
<script> bYvHTML5中文学习网 - HTML5先行者学习网
var c = document.getElementById('mycanvas'); bYvHTML5中文学习网 - HTML5先行者学习网
var ctx = c.getContext("2d"); bYvHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle='#f36'; bYvHTML5中文学习网 - HTML5先行者学习网
ctx.fillRect(100, 100, 100, 100); bYvHTML5中文学习网 - HTML5先行者学习网
</script> bYvHTML5中文学习网 - HTML5先行者学习网
</body> bYvHTML5中文学习网 - HTML5先行者学习网
</html> bYvHTML5中文学习网 - HTML5先行者学习网
bYvHTML5中文学习网 - HTML5先行者学习网