斗破苍穹续集,神武八荒一颗小说,好看的小说完本推荐

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

HTML5游戲制作之五彩連珠（預(yù)覽）

HTML5推出也有很長一段時(shí)間了，一直沒有學(xué)習(xí)過，閑來無事學(xué)習(xí)開發(fā)個(gè)游戲吧。用javascript+canvas編寫一個(gè)五彩連珠的游戲。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)公司依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

Canvas 畫布

標(biāo)簽，很簡(jiǎn)單和普通的tag沒區(qū)別。關(guān)鍵在于js對(duì)他的操作。先看個(gè)示例代碼：

你能看到想到我畫的是什么嗎？ ctx是canvas的繪制的類型2D的，以后會(huì)支持3D，那木，目前基于canvas的繪制都是調(diào)用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);     
  
  
  };

上面的內(nèi)容是我粘貼的官方的，一目了然。

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

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

今天入門就到這里，下一節(jié)講怎么畫一個(gè)球。。。

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

責(zé)任編輯：張偉
來源：君之蘭的博客 HTML5

文章題目：HTML5游戲制作之五彩連珠（預(yù)覽）
標(biāo)題來源：http://fisionsoft.com.cn/article/cdcgcpc.html

新聞中心

其他資訊