脚本宝典收集整理的这篇文章主要介绍了html5教程-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格子的五彩连珠棋盘。 

 

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

摘自  君之m
 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5 Canvas编写五彩连珠（1）：预览全部内容，希望文章能够帮你解决html5教程-HTML5 Canvas编写五彩连珠（1）：预览所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。