HTML5推出也有很長一段時間了，一直沒有學習過，閑來無事學習開發個游戲吧。  用javascript+canvas編寫一個五彩連珠的游戲。

Canvas 畫布

標簽<canvas id="canvas" ></canvas>，很簡單和普通的tag沒區別。 關鍵在于js對他的操作。先看個示例代碼：

<canvas id="canvas" height="100" width="100"></canvas>  
<script>  
    var canvas = document.getElementById("canvas");  
    var ctx  = canvas.getContext("2d");  
    ctx.beginPath();  
    ctx.moveTo(50,10);  
    ctx.lineTo(50,90);  
    ctx.moveTo(10,50);  
    ctx.lineTo(90,50);  
      
    ctx.strokeStyle="red";  
    ctx.stroke();  
</script> 

你能看到想到我畫的是什么嗎？  ctx是canvas的繪制的類型2D的，以后會支持3D，那木，目前基于canvas的繪制都是調用2d context的方法。所以要了解繪制各種圖形，得先看看他的api。

interface CanvasRenderingContext2D {  
 
  // back-reference to the canvas  
  readonly attribute HTMLCanvasElement canvas;  
 
  // state  
  void save(); // push state on state stack  
  void restore(); // pop state stack and restore state  
  // transformations (default transform is the identity matrix)  
  void scale(in double x, in double y);  
  void rotate(in double angle);  
  void translate(in double x, in double y);  
  void transform(in double a, in double b, in double c, in double d, in double e, in double f);  
  void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);  
  // compositing  
           attribute double globalAlpha; // (default 1.0)  
           attribute DOMString globalCompositeOperation; // (default source-over)  
  // colors and styles  
           attribute any strokeStyle; // (default black)  
           attribute any fillStyle; // (default black)  
  CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);  
  CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);  
  CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);  
  CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);  
  CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);  
 
  // line caps/joins  
           attribute double lineWidth; // (default 1)  
           attribute DOMString lineCap; // "butt", "round", "square" (default "butt")  
           attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")  
           attribute double miterLimit; // (default 10)  
 
  // shadows  
           attribute double shadowOffsetX; // (default 0)  
           attribute double shadowOffsetY; // (default 0)  
           attribute double shadowBlur; // (default 0)  
           attribute DOMString shadowColor; // (default transparent black)  
 
  // rects  
  void clearRect(in double x, in double y, in double w, in double h);  
  void fillRect(in double x, in double y, in double w, in double h);  
  void strokeRect(in double x, in double y, in double w, in double h);  
 
  // path API  
  void beginPath();  
  void closePath();  
  void moveTo(in double x, in double y);  
  void lineTo(in double x, in double y);  
  void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);  
  void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);  
  void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);  
  void rect(in double x, in double y, in double w, in double h);  
  void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);  
  void fill();  
  void stroke();  
  void clip();  
  boolean isPointInPath(in double x, in double y);  
 
  // Focus management  
  boolean drawFocusRing(in Element element, in optional boolean canDrawCustom);  
 
  // Caret and selection management  
  long caretBlinkRate();  
  boolean setCaretSelectionRect(in Element element, in double x, in double y, in double w, in double h);  
 
  // text  
           attribute DOMString font; // (default 10px sans-serif)  
           attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")  
           attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")  
  void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);  
  void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);  
  TextMetrics measureText(in DOMString text);  
 
  // drawing images  
  void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);  
  void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);  
  void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);  
  void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);  
  void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);  
  void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);  
 
  // pixel manipulation  
  ImageData createImageData(in double sw, in double sh);  
  ImageData createImageData(in ImageData imagedata);  
  ImageData getImageData(in double sx, in double sy, in double sw, in double sh);  
  void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);  
};  
 
interface CanvasGradient {  
  // opaque object  
  void addColorStop(in double offset, in DOMString color);  
};  
 
interface CanvasPattern {  
  // opaque object  
};  
 
interface TextMetrics {  
  readonly attribute double width;  
};  
 
interface ImageData {  
  readonly attribute unsigned long width;  
  readonly attribute unsigned long height;  
  readonly attribute CanvasPixelArray data;  
};  
 
interface CanvasPixelArray {  
  readonly attribute unsigned long length;  
  getter octet (in unsigned long index);  
  setter void (in unsigned long index, in octet value);  
}; 

上面的內容是我粘貼的官方的，一目了然。 

既然我們知道了lineTo和moveTo的功能，那么我們先把游戲的格子棋盤先畫出來：

<canvas id="canvas" height="600" width="780" style="border:solid 1px #369;background:#333"></canvas> 
<script> 
var canvas = document.getElementById("canvas");  
 
var ctx  = canvas.getContext("2d");  
 
drawMap();  
 
function drawMap()  
{  
    var start = 10;  
    ctx.beginPath();  
    var cell = 30;  
    var max = cell * 9 + start;  
    //ctx.strokeRect(10,10,max,max);  
    ctx.moveTo(start,start);  
      
    for(var i = 0;i <= 9 ;i++){       
        var p = i * cell + start + 0.5;  
        ctx.lineTo(p,max);  
        ctx.moveTo(p+cell,start);  
    }  
      
    for(var i = 0;i <= 9 ;i++){       
        var p = i * cell + start + 0.5;  
        ctx.moveTo(start,p);  
        ctx.lineTo(max,p);  
    }  
      
    ctx.strokeStyle="#567";  
    ctx.stroke();  
}  
      
</script> 

從運行效果可以看到我們的棋盤是從10像素的位置開始畫的，畫了個9*9格子的五彩連珠棋盤。

今天入門就到這里，下一節講怎么畫一個球。。。

原文鏈接：http://www.cnblogs.com/mad/archive/2012/03/10/2389519.html