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 canvasreadonly attribute HTMLCanvasElement canvas;// statevoid save(); // push state on state stackvoid 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);// compositingattribute double globalAlpha; // (default 1.0)attribute DOMString globalCompositeOperation; // (default source-over)// colors and stylesattribute 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/joinsattribute 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)// shadowsattribute double shadowOffsetX; // (default 0)attribute double shadowOffsetY; // (default 0)attribute double shadowBlur; // (default 0)attribute DOMString shadowColor; // (default transparent black)// rectsvoid 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 APIvoid 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 managementboolean drawFocusRing(in Element element, in optional boolean canDrawCustom);// Caret and selection managementlong caretBlinkRate();boolean setCaretSelectionRect(in Element element, in double x, in double y, in double w, in double h);// textattribute 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 imagesvoid 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 manipulationImageData 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 objectvoid 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格子的五彩連珠棋盤。

?

?

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

轉載于:https://www.cnblogs.com/mad/archive/2012/03/10/2389519.html

總結

以上是生活随笔為你收集整理的HTML5 Canvas编写五彩连珠（1）：预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。