HTML5 高階之canvas 繪製圖形
canvas是HTML5中新增的標籤，像所有dom一樣，擁有自己的屬性、方法、和事件，其中就有繪圖的方法，js能夠呼叫它在網頁上完成繪圖。
canvas也是HTML5中最強大的特性之一，允許開發者使用動態和互動式方法在web上實現桌面應用程式的功能
canvas元素會在網頁上建立一個空白區域，然後通過API操作這個區域，與空白的div元素相似，用途完全不同
語法：<canvas id="ddd" width="200" height="200"></canvas>
繪製矩形：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript"> function init(argument) { //獲取canvas區域 var canvas = document.getElementById("canvas"); //獲取繪圖canvas的上下文，接收兩個引數2d或者3d var ctx = canvas.getContext("2d"); //繪製一個帶描邊的矩形 引數：（x,y,width,height） ctx.strokeRect(10,10,260,260); //繪製一個顏色實心的矩形 ctx.fillRect(20,20,240,240); //清除一個矩形形狀的區域 ctx.clearRect(30,30,220,220); } window.addEventListener("load",init,false); </script> </head> <body> <canvas id="canvas" width="600" height="600"> Does not support canvas; </canvas> </body> </html>
繪製圖形中需要的一些方法：
--save（）儲存當前繪製狀態
--restore（）恢復前一次繪製狀態
--traslate（）設定（改變）畫布原點的位置
顏色
在建立圖形時如果不設定顏色，那麼所有的圖形都會收用預設顏色--純黑色
可以用以下屬性指定繪製顏色：
--strokeStyle 宣告形狀線條顏色
--fillStyle 宣告形狀內部區域的顏色
--globalAlpha 透明度屬性，可以設定畫布上圖形的透明度
使用方法：
ctx.fillStyle = "rgba(23,45,204,0.5)"
ctx.strokeStyle = "#666"
漸變
canvas支援的漸變效果包括線性漸變或射線漸變，並且支援設定顏色轉折點
語法：
--createLinearGradient（x1,y1,x2,y2）;建立線性漸變
--createRadialGradient（x1,y1,r1,x2,y2,r2）;建立圓形放射性漸變
--addColorStop（position，color）；指定漸變顏色值
放射性的漸變
建立路徑
以上的方法都是直接在畫布上繪圖，針對一些複雜圖形的繪製，就需要自己通過路徑進行繪製
路徑就是畫筆移動的地圖，路徑建立後，將其傳送給上下文，就可以在畫布上實際地方繪製出圖形
方法：
--beginPath（）開始一個新的形狀描述，建立路徑之前，必須先呼叫這個方法
--closePath（）關閉路徑，用直線將最後一個點與原點相連，如果想保留路徑，則不需要呼叫這個方法
--stroke（）將路徑繪製為輪廓形狀
--fill（）將路徑繪製為實心形狀，使用該方法時可以不用closePath關閉路徑，該方法會通過連線最後一個點和第一個點實現封閉
--clip（）在上下文中設定裁剪區域
以下方法可以用於設定路徑和建立真正的形狀：
--moveTo（x，y）將筆觸移到指定的位置
--lineTo（x，y）繪製一條直線，連線當前筆觸位置到x和y位置的新位置
--rect（x，y，width，height）生成一個矩形路徑
--arc（x，y，radius，startAngle，endAngle，direction）這個方法可以在位置（x，y）上生成弧線或圓形，半徑和弧度分別由屬性指定，direction是布林型別，表示順時針還方向是逆時針方向
利用路徑繪製一個形狀試試：
繪製一個圓形
練習畫一個太極八卦圖
