新三国演义下载,首发115252,泰国旅游要带多少钱
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 HTMLCollection和NodeList的区别详解
我要评论
网友评论