為了更好的學習canvas知識，你需要了解一些基本的HTML，js等基礎知識。
本節知識是利用canvas畫布在瀏覽器中繪制一個黑色矩形。只有幾行代碼，非常的簡單。
1，在body中添加canvas元素。
<canvas id="myCanvas" width="1000" height="800"></canvas>
這段代碼并不會產生任何效果，它僅僅是創建了一個空白的canvas元素，我們還沒有對它進行任何操作。在canvas元素中有兩個屬性需要設置分別是width和height，這兩個屬性明確定義了canvas元素的尺寸。如果不定義這兩個屬性，它會采用默認的高度和寬度， 分別是300和150。
2，代碼中使用了jQuery，通過get方法獲取渲染上下文。并保存在變量context中。接下來就是繪制矩形了。context.fillrect(x,y,width,height)。前兩個參數是矩形距離左上角的距離，后兩個參數是寬度和高度。由于默認的顏色是黑色，所以我們看到的是一個黑色的矩形。關于樣式后面的章節我會講到。運行代碼就會在瀏覽器中看到一個黑色的矩形。設置的高度和寬度都為100，所以也是正方形。
所有的代碼如下，是不是很簡單，我想說是非常簡單。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas基礎教程</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(50,50,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800"></canvas>
</body>
</html>
運行的結果如下
黑色矩形.png
