HTML5新增核心工具——canvas

Canvas元素稱得上是HTML5的核心所在，它是一個依靠JavaScript繪製華麗圖像的元素。

Canvas由一個可繪製地區HTML代碼中的屬性定義決定高度和寬度,JavaScript代碼能夠訪問該地區，經過一套完整的繪圖功能相似於其餘通用二維的API，從而生成動態的圖形。

Canvas能夠在瀏覽器中繪製出十分華麗的圖形，好比：

固然這應該算比較高級的用法了，本菜也不會=.=

Canvas一個很大的做用就是製做遊戲，本文經過博主以前作的一個小遊戲來從零介紹Canvas的用法，先展現下吧：

OK，這就是用Canvas來完成的遊戲。

 

繪製以前的準備工做：

1.在body中加入canvas標籤，設置它的id、width、height，固然也能夠動態設置它的寬高。

 <canvas id="mycanvas" width="1200" height="500"></canvas>

2.得到canvas對象的上下文obj.getContext(par),par參數爲「2d」,目前canvas只支持二維效果。

var ctx = document.getElementById("mycanvas").getContext("2d");

如此你便有了一張1200*500的「畫布」和一支名爲「ctx」的畫筆，接下來咱們從一些最簡單的圖形開始繪製。

 

繪製矩形：

示例代碼以下：

var ctx=document.getElementById("container").getContext("2d");
    
    ctx.fillStyle="blue";
    ctx.fillRect(10,10,200,100);

    ctx.lineWidth=10;
    ctx.strokeStyle="red";
    ctx.strokeRect(300,10,200,100);

其中fill表示填充，stroke表示僅繪製邊框。

同理fillRect表示實心矩形，strokeRect表示矩形邊框，他們都有四個參數：x,y,w,h 分別爲橫縱座標、寬、高。

fillStyle表示填充樣式，strokeStyle表示邊框樣式。

lineWidth表示線寬。

顯示結果：

須要注意的是，設置樣式等應寫在繪製圖形以前，不然樣式會渲染不上。

在繪製多個圖形時，應該在繪製一個圖形以前開繪製路徑，定製完成後關閉繪製路徑並繪製定製好的圖形。例如上例標準寫法應爲：

   var ctx=document.getElementById("container").getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="blue";
    ctx.fillRect(10,10,200,100);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.strokeStyle="red";
    ctx.strokeRect(300,10,200,100);
    ctx.closePath();
    ctx.stroke();

beginPath()開啓繪製路徑，closePath()閉合繪製路徑，stroke()繪製定製圖形。在以後的練習中必定要養成習慣，不然當繪製線條時就會發現因爲未閉合繪製路徑所出現的線條錯連。

 

繪製線條：

示例代碼以下：

var ctx=document.getElementById("container").getContext("2d");
    ctx.beginPath();
    ctx.moveTo(400,100);
    ctx.lineTo(300,200);
    ctx.lineTo(350,200);
    ctx.lineTo(250,300);
    ctx.lineTo(400,300);
    ctx.closePath();
    ctx.stroke();

其中，moveTo表示將畫筆移動到某個座標上，lineTo指以畫筆落點開始畫到哪一個位置。本次咱們想要畫一個簡單的樹冠，結果：

可見，這裏咱們只畫了一半。(400，100)位置爲樹頂，(400，300)位置爲樹底中部，線條自動閉合正是咱們關閉繪製路徑所產生的效果。

接下來咱們把另外一半畫完，並給這棵樹填充上綠色：

 var ctx=document.getElementById("container").getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="green";
    ctx.moveTo(400,100);
    ctx.lineTo(300,200);
    ctx.lineTo(350,200);
    ctx.lineTo(250,300);
    ctx.lineTo(400,300);
    ctx.lineTo(550,300);
    ctx.lineTo(450,200);
    ctx.lineTo(500,200);
    ctx.lineTo(400,100);
    ctx.fill();
    ctx.closePath();
    ctx.stroke();

注意寫在最後的fill()爲填充樣式：

 

繪製圓形：

示例代碼：

 var ctx=document.getElementById("container").getContext("2d");
    ctx.beginPath();
    ctx.arc(200,200,100,0,360*Math.PI/180,true);
    ctx.closePath();
    ctx.stroke();

arc(x,y,r,starta,enda,anti);參數分別表明：圓心橫、縱座標，半徑、起始角（需轉換成弧度值）、終止角、繪製方向。

用canvas繪製圓，若是你是剛接觸必定以爲很糾結，由於它的參數有不少都是相反的。這裏爲了你們不糾結，我多羅嗦幾句。

起、止角的計算與咱們數學上的角度計算不一樣，數學中的角度逆時針爲正，而這裏的起止角是以順時針爲正，也就是當你起角設爲0度，止角設爲120度。它是從右邊水平位置向下旋轉計算角度。

還有就是繪製方向上，true表明逆時針，false表明順時針。暈了的同窗看下面的例子：

 ctx.arc(200,200,100,0,120*Math.PI/180,true);

設起角爲0，止角120。按數學上的思想應該是一個小於半圓的上半邊的弧，而結果：

這裏true表示逆時針繪製，因此繪出了的圖形大於半圓。若改成false：

 

此時順時針繪製出的圖形小於半圓，這裏你們應該也能夠理解arc的角度計算方向是與數學相反的。要想畫一個位於上方的小半圓？止角設爲-120度，繪製方向true便可。

這裏羅嗦這麼多就是但願剛接觸的朋友們少走彎路，不像咱們研究半天。

 

繪製陰影：

 var ctx=document.getElementById("container").getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="gray";
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.shadowColor="gold";
    ctx.shadowBlur=5;
    ctx.fillRect(10,10,100,100);
    ctx.closePath();
    ctx.stroke();

shadowOffsetX、shadowOffsetY表示陰影橫、縱向偏移量，shadowColor表示陰影顏色，shadowBlur表示模糊等級。

因爲在以前CSS3相關博文中已經講了很多關於陰影的東西了，這裏就一筆帶過。依然須要注意的是，先設置樣式，最後再繪製矩形，順序反了效果會渲染不上。

 

繪製漸變：

線性漸變：

   ctx.beginPath();
   var Color=ctx.createLinearGradient(500,500,500,0);
   Color.addColorStop(0.3,"orange");
   Color.addColorStop(0.5,"yellow");
   Color.addColorStop(1,"gray");
   ctx.fillStyle=Color;
   ctx.fillRect(0,0,1200,500);
   ctx.closePath();
   ctx.stroke();

寫法爲：將ctx.createLinearGradient()賦值給一顏色變量，顏色變量能夠添加多個漸變顏色，addColorStop其共有兩個參數，1.偏移量（0-1）2.顏色。最後將顏色變量賦給fillStyle。

createLinearGradient()共有四個參數：一、2表示起始面，三、4表示終於面。

徑向漸變：

   ctx.beginPath();
        ctx.arc(500,300,100,0,360*Math.PI/180,true);
        var Color=ctx.createRadialGradient(500,300,30,500,300,100);
        Color.addColorStop(0,"red");
        Color.addColorStop(0.5,"orange");
        Color.addColorStop(1,"yellow");
        ctx.fillStyle=Color;
        ctx.fill();
        ctx.closePath();
        ctx.stroke();

與線性漸變比較類似，不一樣的是其名爲createRadialGradient()中有六個參數：一、2.漸變開始圓的圓心座標，3.漸變開始圓的半徑，四、5.漸變結束圓的圓心座標，6.漸變結束圓的半徑。

 

繪製文字：

ctx.beginPath();
ctx.strokeStyle="gold";
ctx.fillStyle="bule";
ctx.font="50px 微軟雅黑";
ctx.strokeText("hello world！",700,200);
ctx.font="30px 幼圓";
ctx.fillText("hello kitty？",700,300);
ctx.fill();
ctx.closePath();
ctx.stroke();

fillText(text,x,y,[maxwidth])繪製字符串，text表示文字內容，x,y文字座標位置。[maxwidth]可選，設置字符最大寬度防止溢出。font設置字體。

其它參數：

textAlign 設置文字水平對齊方式 value 爲 start|end|left|right|center  默認值爲start

textBaseline 設置文字垂直對齊方式 value 爲 top|hanging|middle|alphabetic|ideographic|bootom  默認爲alphabetic

你們有興趣本身試試吧。

 

圖片繪製：

呼.....寫了半天終於寫到正題了，相對於上面簡單圖形的繪製，圖片繪製要用的更多一些，尤爲是在遊戲中。

這裏介紹一種較簡單的方法，首先在body中寫上：

   <div class="hide">
        <img src="" id="myImg">
   </div>

將你想要繪製的圖片先加入body中，而後將父級div隱藏，一個隱藏的div中能夠放入一個項目中全部須要繪製的圖片甚至是音頻文件，就好像一個別人看不見的素材庫。

而後：

 var ctx = document.getElementById("mycanvas").getContext("2d");
    var img=document.getElementById("myImg");
    ctx.beginPath();
    ctx.drawImage(img,x,y);
    ctx.closePath();
    ctx.stroke();

獲得你想要繪製的圖片對象，經過drawImage來繪製。這裏drawImage()能夠有3個參數，5個參數，9個參數。

3個參數：1.須要繪製的圖片對象 2,3.圖片座標；

5個參數：1.須要繪製的圖片對象 2,3.圖片座標 4,5.圖片寬高；

9個參數：1.須要繪製的圖片對象 2,3.繪製圖片的橫縱向切割點 4.橫向切割寬度 5.縱向切割高度 6,7.切割好的圖片座標 8,9.切割好的圖片寬高。

前兩個比較好理解，第三種參數模式怎麼用呢？這裏舉個例子：在最開始展現的遊戲中，會走路的怪物並非gif，而是以下的背景透明的PNG格式：

咱們經過必定的時間間隔截取圖片中不一樣的區域，連貫起來就成了動畫的效果了。提及切割圖片，學過Web性能優化的人很容易想起 Spirite，它就是經過把一網頁上的所需的圖片所有聚集到一張圖上，用哪部分就截取哪部分。

扯遠了，如今咱們試着讓這種綠怪物走起來：

 var ctx=document.getElementById("container").getContext("2d");
    var img=document.getElementById("myImg");
    var X=0;
    var countNum=0;
    function picRun(){
        ctx.clearRect(0,0,1200,1000);
        countNum++;
        if(countNum==10){
            X+=129;
            countNum=0;
        }
        if(X>=387){
            X=0;
        }
        ctx.beginPath();
        ctx.drawImage(img,X,0,129,135,100,100,129,135);
        ctx.closePath();
        ctx.stroke();
    }
    window.setInterval(picRun,30);

*** 首先加入圖片，獲取圖片對象。分析下怪物走路那張圖片，寬爲515px，高爲135px，也就是說每一個單獨的怪物寬爲四分之一即129px，高爲135px。

將橫向切割點設爲變量X，因爲此圖只需橫切不須要縱切，縱向切割點設爲常量，實際上作法同樣。

在drawImage中填入參數，就本例而言只有橫向切割點一個變量。經過setInterval來循環執行picRun函數,每30毫秒執行一次。countNum俗稱計數器，在作遊戲中比較常見，目的是爲了控制圖片的切換頻率。

（因爲一個遊戲中一般有多個動做頻率不一樣的對象，因此固然不能隨便改變setInterval的執行頻率。加入了計數器，就能很好的控制各個對象的動做頻率了）

本例中圖片切換頻率爲30*10即300毫秒一次，切換時橫向切割點右移135px即怪物寬度，當橫向切割點大於3個怪物寬度時回0座標從新切割。

clearRect()是爲了清除以前的圖層，始終只顯示一張圖片，不然每次切出的新圖會不停疊加。

結果：

 

本文到此結束，下篇介紹HTML5另外一核心工具——本地存儲，敬請期待。