繪制線條
繪圖的基本步驟是：先用getContext("2d")獲取二維繪圖環境上下文，有二維那肯定也有三維了？是的，三維就要用到WebGL了，技術水平有限，今天就不討論三維了。然後設置畫筆樣式，lineWidth畫筆寬度，strokeStyle畫筆顏色，lineCap線頭樣式。樣式設置完畢後就開始繪圖了，首先用moveTo()把一個看不到的光標移動到起點位置，然後lineTo()設定重點，最後stroke()畫出線條。
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>繪制線條</title>
<style>
body,div{margin:0px;padding:0px;text-align:center}
#canv{
border:2px solid black;
border-radius:4px;
box-shadow:0px 0px 10px black;
-webkit-box-shadow:0px 0px 10px black;
-moz-box-shadow:0px 0px 10px black;
}
</style>
</head>
<body>
<h1>繪制線條</h1>
<canvas id="canv" width="400px" height="300px">
你若能看到這句話說明你浏覽器不支持canvas!
</canvas>
</body>
<script type="text/javascript">
var canv = document.getElementById("canv");
//獲取2d上下文
var ctx = canv.getContext("2d");
//設置樣式
ctx.lineWidth = 40;
ctx.strokeStyle = "red";
ctx.lineCap = "round"; //butt ,square,round
ctx.beginPath();
//設置起始點
ctx.moveTo(20,20);
ctx.lineTo(200,200);
//開始繪制定義好的路徑
ctx.stroke();
</script>
</html>