最近看了css3的三維動畫效果網頁，效果很贊，遂決定深入根源，本章將講到其中的基礎之一canvas作圖，從網上找了資料，作此筆記，以整理自己的思緒，加深印象。
一、可以對canvas這個標籤直接加css，canvas就相當於一個框，也可以將其想象成一個舞臺。
canvas{
border:dashed 2px #CCC;
background-color: green;
transform: rotate3d(1,1,0,50deg);
}以上只是隨便示範，想怎麼寫就怎麼寫（跟其他標籤一視同仁就好），canvas特殊的地方是可以用函數在它上面畫畫，隨便設了一個div，並沒有這樣的效果，以下將介紹一些蒐集的簡單畫法及效果。
我們先搭建一個簡單的，白底的畫板，今天重點是作畫，畫板的東西之後再說好了。
<canvas id="can" width="400px" height="300px"></canvas>1、畫直線
寫法是用原生JS寫的，JS比較煩人的就是選擇器，每次都要寫上一大段，現在用函數節省這一步驟。
function $$(id){
return document.getElementById(id);
}function pic() {
var canvas=$$('can');//取畫布的對象
var can=canvas.getContext('2d');//通過調用canvas對象的getContext()方法來獲取繪圖環境，getContext()方法只需要一個參數：繪圖環境的類型。可以寫2d。
can.moveTo(100,100);//起點
can.lineTo(200,100);//第一條線段的終點
can.lineTo(300,200);//第二條線段的終點，還記得小時候玩過的連線遊戲嗎？
can.lineWidth=5;//劃線的寬度
can.strokeStyle="red";//劃線的顏色
can.stroke();//最重要的一步，劃線的這個動作，沒有這個動作，就算設定了很多樣式照樣畫不出東西
}因爲畫畫的是個函數，而這個函數沒有被調用，所以加上pic();這句話吧，當然怎麼調用，加在哪裏，隨你。
ps：因爲想試試多條線段會怎麼樣，調用的時候發現了一個有趣的現象。
1）把pic();放在
<body οnlοad="pic();"> function pic() {
var canvas=$$('can');//取畫布的對象
var can=canvas.getContext('2d');//通過調用canvas對象的getContext()方法來獲取繪圖環境，getContext()方法只需要一個參數：繪圖環境的類型。可以寫2d。
can.moveTo(100,100);//第一條
can.lineTo(200,100);
can.lineTo(300,200);
can.lineWidth=5;
can.strokeStyle="red";
can.stroke();
can.moveTo(1,1);//第二條
can.lineTo(130,120);
can.lineTo(240,300);
can.stroke();
can.moveTo(15,15);//第三條
can.lineTo(299,420);
can.lineTo(340,280);
}頁面上只會出現2條劃線，第三條不會出現。<canvas id="can" width="400px" height="300px" οnclick="pic()"></canvas>爲了試驗，我在最後的stroke()後面又加了2條劃線：<pre name="code" class="javascript"> function pic() {
var canvas=$$('can');//取畫布的對象
var can=canvas.getContext('2d');//通過調用canvas對象的getContext()方法來獲取繪圖環境，getContext()方法只需要一個參數：繪圖環境的類型。可以寫2d。
can.moveTo(100,100);//第一條
can.lineTo(200,100);
can.lineTo(300,200);
can.lineWidth=5;
can.strokeStyle="red";
can.stroke();
can.moveTo(1,1);//第二條
can.lineTo(130,120);
can.lineTo(240,300);
can.stroke();
can.moveTo(15,15);//第三條
can.lineTo(299,420);
can.lineTo(340,280);
can.moveTo(10,10);//第四條
can.lineTo(233,51);
can.lineTo(400,480);
}結果是按第一下，出現2條，再按一下，stroke()後面加的劃線就一起出來了；可以親自試一下，有點意思。又作死將畫布的大小調小，然後將畫布的overflow設置成visible，線只能看到畫布大小的露出來的部分，將z-index調成很高也沒有用，在畫布之外的線彷彿進入了異次元空間一樣，不見了就是不見了，所以...那些線去哪了？
2、給直線上色，爲了使直線的顏色不單調，可以給直線上漸變色。控制線的顏色的是：
can.strokeStyle="red";var git1=can.createLinearGradient(0,0,100,100);//起點座標0,0終點座標100,100的一條漸變線
git1.addColorStop(0,'green');
git1.addColorStop(1,'yellow'); <pre name="code" class="html">can.strokeStyle=git1;在pic()裏面加上這段話，當然要確保其是最後控制顏色的語句，這句話是有依據滴，大家不妨嘗試一下。
談到顏色不得不說一下beginPath()和closePath()，如果把git1顏色加在red的這句語句後面，不管中間畫了多少條線，顏色都會變成git1，是因爲路徑的原因，如果想要畫出不同的顏色的線段，就先用closePath()關閉路徑，然後再用beginPath()開啓一個新路徑，如果只是關閉，並不會開啓一個新路徑。如果beginPath()沒有設置新的顏色，那麼會沿用最後一個beginPath()裏的顏色設置。並且具備回溯功能，即如果第一個path沒有設置，第三個path設置了，第一個path會用第三個path的，但不會使用第二個path的，如果第三個path沒有設置顏色，那個第一個和第三個path都會使用設置了顏色的第二個path。
ps：上面那團線性顏料對所有在畫布的（0,0,100,100）這條線的垂直線到畫布交界的這塊範圍都有效，並且漸變是按起點到終點這樣的顏色漸變的，如果畫了一條
can.moveTo(0,100);
can.lineTo(100,0);這條線的顏色是不會變的=。=，往不同方向劃線，你們會明白我所說的。
3、畫矩形
can.rect(30,30,340,240);//起點，長，寬can.strokeRect(30,30,340,240);畫填充的矩形
can.fillStyle = 'yellow';
can.fillRect(30,30,340,240);可以用git1填充，如果想填充整個長方形，需要將git1調成:
can.createLinearGradient(30,30,370,30)4、畫圓形
！！！一開始就是衝着畫圓來看的canvas
arc(x,y,半徑，開始角，結束角，是不是逆時針），記住上面那張圖，一切都在掌握之中
fill和stroke的顏色是不一樣的，需各自設置。
5、圓形漸變！！
首先圓形漸變和線性漸變一樣，不在乎容器長得怎樣，裝得下就裝下，裝不下的部分就不顯示。
圓形漸變有兩個點，本色的圓圈，負責漸變範圍的圓圈，createRadialGradient(Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd)；我們印象裏的圓形漸變是從一個點的顏色漸漸變成另一種顏色，是以水波紋似的擴展出去的，將start理解爲開始的那個點，那個點是有大小的，即原色是有大小的，將end理解爲控制漸變結束的交界處，如果開始的圓與負責控制漸變範圍的圓外離，變色範圍爲兩個圓的外切線與邊界的交界合起來的範圍。
例如：
var gnt=can.createRadialGradient(50,550,50,500,0,300);
gnt.addColorStop(0,'red');
gnt.addColorStop(1,'#000');
can.fillStyle = gnt;
can.fillRect(0,0,1000,600);addColorStop(1,xxx);即最後變成的顏色，
當然可以加上0-1的範圍控制顏色變化的速度什麼的
經過一天的研究，對canvas作圖有了一定的瞭解，本文爲讀書筆記類型，也許會與其他文章有相似處
暫記得的參考資料：
http://jo2.org/html5-canvas-beginpath-important/
http://www.w3school.com.cn/tags/canvas_arc.asp