如何使用 <canvas> 標記繪圖
大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環境”對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字符串，比如調用 beginPath() 和 arc() 方法。
漸變線條就是顏色有漸變的效果，當然漸變的樣式可以遵循路徑的方向也可以不遵循路徑的方向：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = cans.createLinearGradient(0,0,400,300);//線性漸變的起止坐標
gnt1.addColorStop(0,'red');//創建漸變的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個漸變中可以寫任意個漸變顏色
gnt1.addColorStop(1,'yellow');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>