欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 Canvas编写五彩连珠(1):预览

程序员文章站 2022-04-27 20:57:30
html5推出也有很长一段时间了,一直没有学习过,闲来无事学习开发个游戏吧。  用javascript+canvas编写一个 五彩连珠的游戏。 canvas 画布 标签

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


 HTML5 Canvas编写五彩连珠(1):预览

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

摘自  君之蘭