點評：今天學習html5 的canvas，發現fillRect的坐標和大小一直不對，研究了半天，發現canvas的寬度和高度必須內聯在canvas標籤中才對
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 ></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></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></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>