如果文章有不對之處，還請大神們多多指點
    canvas也是html中的一個元素，可以給這個元素新增一些html屬性，屬性width預設為300px，heigth預設為150px；
    canvas是h5中新增的眾多元素中的一個，直譯過來叫做畫布，可以用來通過h5繪製一些圖形效果；
    剛開始的時候只是知道是用來做一些圖形效果的，但是後來瞭解到canvas的強大
    可以製作遊戲，圖示製作，banner廣告，模擬器，字型設計，製作圖形編輯器等等老多了，不過千里之行始於足下，還是先看看基本的一些方法和屬性吧！


    想要用畫布第一步：需要先建立一個canvas畫布
              第二步：定義畫布的大小，並且給畫布指定一個對應的id
              第三步：在javascript中獲取canvas畫布物件
              第四步：通過canvas物件的getContext()方法獲取canvas繪圖上下文物件


    完成這4步以後呢，就可以正式的繪製圖像啦~~
    不過說了這麼多肯定還是雲裡霧裡，程式猿還是要用程式碼理解起來更快


    <canvas width="500" height="500" id="wandou">您的瀏覽器不支援canvas</canvas>
    這裡有一個非常重要的點，也是時間久了容易忘記的點，就是設定canvas的寬高，一般寫樣式我們習慣了用css中寫，很少用到行內樣式

    但是canvas與其他的不同，想要設定寬高的時候是直接用行內樣式來設定的，而不是用css、js等去對canvas進行設定，否則，畫布會被拉伸，被拉伸的畫布會導致使用者無法看到全部的圖形；

    第一步、第二步完成了，現在就開始下面的了
    <script>
        var canvas=document.getElementById('wandou');
        //在js中拿到canvas這塊畫布，用到了DOM獲取物件，除了可以用getElementById外，其他的getElementsByTagName等等其他的都可以，但是如果獲取的是陣列物件需要加上下標


        var ctx=canvas.getContext('2d');
        //getContext('2d')表示呼叫canvas的2d上下文，也就是想要繪製平面圖形


        //畫布的左上角為原點，width表示橫向可用畫素，height表示縱向可用畫素
        //下面呢。我們就在canvas上劃一條直線，大家都知道，如果想劃一條直線的就，就需要兩個點來確定直線的兩端，在畫布中也是一樣，需要確認起始點，結束點，再描線，和平時用筆劃畫差不多。


        //canvas預設以畫素為單位，在座標中不需要寫px
        ctx.moveTo(50,50);
        //設定起點，第一個點的位置50，50,也就是距離畫布左上角（原點）x軸向偏移50px，y軸向下偏移50px


        ctx.lineTo(150,250);
        //設定終點，第二個點的位置150,250，,也就是距離畫布左上角（原點）x軸向偏移150px，y軸向下偏移250px


        //大功即將搞成，臨門一腳了
        ctx.stroke();
        //描線，看到這一步的朋友們是不是感覺跟生活中畫圖是一樣的？先畫出兩個點，然後用鉛筆一描線就哦了


        //怎麼樣是不是感覺還是很簡單的？也就只有幾步的事情喲，看完了，趕緊試試吧！！
    </script>

繪製完成的效果，給大家截了下圖，為了方便看，我給canvas加了一個邊框，可能圖形簡單了點，哺乳綱

上面我們說到用canvas來劃直線，有沒有覺得很神奇，就和劃畫一樣，如果您認為它只能劃直線那就大錯特錯了，現在個讓我們來畫個三角形，這都是生活中最常見的平面圖形了
    首先需要建立一個canvas
    <canvas width="500" height="500" id="wandou"></canvas>
    <script>
        var canvas=document.getElementsByTagName('canvas')[0];
        //這個上面說了喲，如果用getElementsByTagName需要用下標，如果是第一張畫布就用[0]就可以了
        var ctx=canvas.getContext('2d');
        //三角形也是平面圖形所以用2d就可以了
        ctx.moveTo(50,50);
        //起始點
        ctx.lineTo(450,50);
        //第一個終點

        ctx.lineTo(250,200);

        //第二個終點

        ctx.lineTo(50,50);
        //最後一個終點，因為三角形是閉合的，所以座標和初始座標一樣
        ctx.stroke();
        //描邊，三角形就可以了
        //這有個注意的點就是描邊，不是寫一個起始點一個終點，就描邊一次，而是把所有的起始點，終點都定好以後，一次性描邊
    </script>
好啦，既然三角形都會劃了，什麼正方形、矩形、菱形或者多邊形就都可以劃了，發揮想象畫一個自己喜歡形狀把，比如五角星？哈哈


當然除了在body中直接建立一個canvas標籤（比較簡單），也可以在js中建立一個canvas
    <script>
        //首先建立一個canvas標籤
        var canvas=document.createElement('canvas');
        //把canvas標籤插入到body中或者div中
        document.body.appendChild(canvas);
        canvas.id('wandou');
        //給canvas畫布新增id屬性
        canvas.width=500;
        canvas.height=500;
        //給畫布設定寬高
        //這樣就建立完成了，但是可能什麼也看不見，可以給canvas用css設定border：1px solid #000，這樣就能看見畫布的大小了
    </script>


今天簡單瞭解了下canvas，可以繪製基本圖形了，後面會更深入的介紹canvas的屬性及方法，做出更多更好玩的東東...