canvas之一：繪製直線
canvas是html5中最激動人心的技術之一，使用它，可以在瀏覽器上繪製出各種酷炫的效果，但是呢，千里之行，始於足下，接下來我們就從畫一條最簡單的直線開始，話不多說，先上效果圖：
程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 1024;
canvas.height = 768;
context.moveTo(100,100);
context.lineTo(700,700);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
</html>
程式碼詳解：
1.首先我們需要一個<canvas>標籤來在瀏覽器上定義一張畫布，id屬性是為了讓js程式碼能夠找到它，style屬性為畫布設定一些樣式。
2.然後我們要在js中獲取這個canvas物件，var canvas = document.getElementById("canvas")這行程式碼就是啦！
3.接下來再使用var context = canvas.getContext("2d")獲取到canvas的繪圖上下文，這個東西有什麼用呢？以後繪圖我們都要通過它來進行哦~
4.我們通過context.moveTo(100,100)把畫筆移動到(100,100)這個點開始進行繪製。
5.context.lineTo(700,700)表示在上個點和這個點(700,700)直接畫一條直線。
6.context.lineWidth = 5和context.strokeStyle = "red"這兩行設定了畫筆的一些屬性：線條的寬度和顏色。
7.做完以上步驟以後，實際上我們只是設定好了繪製一條直線所需的所有狀態，但此時畫布上仍然是一片空白，關鍵的一步在這裡：context.stroke()，它實實在在地在畫布上畫出了一條直線給我們看，感覺很酷炫有木有~