HTML5 Canvas编写五彩连珠（1）：预览

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格子的五彩连珠棋盘。