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