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

今天入门就到这里，下一节讲怎么画一个球。。。