canvas的入門

canvas的介紹

最近爲了作loading圖看了一下canvas的用法，下面總結一下我對canvas的用法的一下了解。
canvas是HTML5新增的組件，它像是一塊畫布，使用JS就能夠在上面繪製圖形，結合定時器還能夠作出動畫效果。目前的一些主流瀏覽器都支持canvas，如：Chrome、FireFox等；在使用canvas前，咱們能夠用canvas.getContext測試咱們的瀏覽器是否支持canvas。

if(canvas.getContext)
    alert("你的瀏覽器支持canvas");
else
    alert("你的瀏覽器不支持canvas");

getContext() 方法返回一個用於在畫布上繪圖的環境。當前惟一的合法值是 "2d"，它指定了二維繪圖，咱們的全部操做都將在這個二維環境上進行。

在canvas上繪製

在HTML文件中建立一個canvas，canvas像別的塊級標籤同樣能夠設置寬高等一些樣式屬性

<!--HTML代碼-->
   <canvas id="painting" style="border: 1px solid black"></canvas>

效果圖：

在畫圖以前，先了解一下canvas的座標系統，它的左上角就是座標原點（0,0）。接下來在上面繪製一些圖形。

//JS代碼
    var canvas = document.getElementById("painting"),
    ctx = canvas.getContext("2d");
    ctx.fillStyle = '#ff0000';                    //設置填充顏色，若是須要透明度，可用rgba
    ctx.fillRect(10, 10, 40, 40);
    ctx.fillStyle = "rgba(156,236,255,.9)";
    ctx.arc(50,50,10,0,Math.PI*2,true);         //建立一個圓傳入的參數爲（圓心的X,圓心的Y，圓的半徑，起始角度，結束角度，順、逆時針），咱們能夠經過控制起始和結束角度來繪製圓弧
    ctx.fill();                                 //fill() 方法填充當前的圖像。默認顏色是黑色。
    //下面咱們畫一條圓弧
    ctx.moveTo(100,50);
    ctx.arc(50,50,50,0,Math.PI,false);
    ctx.stroke();
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();                               //stroke() 方法會實際地繪製出經過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色

效果圖：

canvas的方法還有不少，這裏只是列出了一些比較經常使用的方法，要繪製出咱們想要的圖形仍是須要發揮咱們的想象力而後用JS表達出來。