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