零基礎HTML5遊戲製作教程 第2章 簡單圖形的繪製

標籤：

第二章 簡單圖形的繪製

    HTML5支援使用Canvas和SVG等方式在網頁直接繪製圖形。其中SVG適合用來繪製高品質的向量圖形，不適合用來做遊戲，所以我們做遊戲一般使用Canvas。    

    由於本教程以簡單為原則，所以在初學階段請不要把注意力分散到美工、畫質等細節，我們只需要掌握矩形、多邊形、圓形等簡單圖形的繪製，並對這些圖形編程，使之具有一定的運動能力和遊戲效果。

    （如果你偷懶，你甚至可以跳過本章中多邊形和圓形的繪製，只學矩形，然後直接去看下一章。）

一,矩形的繪製

    命令的格式是context.fillRect(x,y,width,height)

    其中參數x為矩形的左上方座標，y是右上方座標，width是矩形的寬度（像素點），height是矩形的高度（像素點）。

    繪製之前，一般還要指定充填的顏色，不指定的話預設為黑色。

    命令是context.fillStyle=“green”;

    比如，你要做一個綠色的小方塊的話，可以這樣實現：

context.fillStyle=“green”;context.fillRect(30,30,100,100);

看起來是這樣的（）。這隻是一個靜態方塊，下一章會講到怎麼讓她動起來。

二，多邊形的繪製
    多邊形的繪製比矩形要稍微複雜一點，因為Canvas只提供了矩形的直接繪製的函數，其他多邊形要一條一條線條地自己繪製。
    需要用到5個函數，分別是context.beginPath();context.moveTo();context.lineTo();context.closePath();context.fill();
    各函數的作用分別如下：
    context.beginPath()；用於開始一個新路徑
    context.moveTo()；用於將canvas的當前座標移動到指定位置
    context.lineTo()；用於繪製一條當前點到指定點的線段
    context.closePath()；用於將當前點和起始點串連，從而得到一個閉合的圖形
    context.fill()；用於充填顏色。
    下面以最簡單的多邊形，三角形為例

context.beginPath();context.moveTo(100,100);context.lineTo(50,200);context.lineTo(150,200);context.closePath();context.fillStyle="green";context.fill();

得到的三角形如。

三，圓形的繪製
    其實電腦繪製的是一段圓弧，最後通過closePath()首尾相接。
    需要用到的函數是context.arc(x,y,r,sAngel,eAngel,countclockwise);
    其中x為圓心橫座標，y為圓心縱座標，r為半徑，sAngel為起始角度（用弧度表示），eAngel為結束角度（以弧度表示），countclockwise為可選項，指定順時針或逆時針方向。
    下面結合多邊形的畫法，畫一個缺一個角的圓圈。

context.beginPath();context.arc(100,100,50,0,1.5*Math.PI);context.lineTo(100,100);context.closePath();context.fillStyle="green";context.fill();

如：

 

零基礎HTML5遊戲製作教程 第2章 簡單圖形的繪製