HTML5推出也有很长一段时间了，一直没有学习过，闲来无事学习开发个游戏吧。 用javascript+canvas编写一个五彩连珠的游戏。
成都创新互联公司是一家专业从事网站设计、做网站、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,成都创新互联公司依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！
Canvas 画布
标签，很简单和普通的tag没区别。 关键在于js对他的操作。先看个示例代码：
-
-
你能看到想到我画的是什么吗？ 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的功能，那么我们先把游戏的格子棋盘先画出来：
-
-
从运行效果可以看到我们的棋盘是从10像素的位置开始画的，画了个9*9格子的五彩连珠棋盘。
今天入门就到这里，下一节讲怎么画一个球。。。
原文链接：http://www.cnblogs.com/mad/archive/2012/03/10/2389519.html
责任编辑：张伟
来源： 君之蘭的博客 HTML5
文章题目：HTML5游戏制作之五彩连珠（预览）
URL地址：
http://cdxtjz.cn/article/cdcgcpc.html
