html超级玛丽游戏源码,超级玛丽HTML5源代码学习------(一）

My first Game

body {

/** 边框：无 0像素 */

border:none 0px;

/** 边外补白：向外填充0像素 */

margin:0px;

/** 向内填充：向内填充0像素 距上级边框0像素 */

padding:10px;

/** 设置字体大小 16px = 1em */

font-size : 16px;

background-color : #f3f3f3;

}

/** 画布 canvas */

canvas {

/** 边框：1像素 实线 蓝色 */

border : 1px solid blue;

}

function init(){

// 创建canvas，并初始化 (我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas)

var canvas=document.createElement("canvas");

//设置canvas对象的高度和宽度

canvas.width=600;

canvas.height=400;

//将canvas加入到body的末尾

document.body.appendChild(canvas);

// 取得2d绘图上下文

// context是一个封装了很多绘图功能的对象

// 获取这个对象的方法是var context =canvas.getContext("2d");

// html5 目前好像只提供2D服务，它还是处女

var context= canvas.getContext("2d");

// 加载图片,加载后在context上进行绘制. (图片是异步加载,所以在onload事件里进行绘制)

var image = new Image();

//获取图像地址

image.src = "../res/bg.png";

//image的onload事件

image.οnlοad=function(event){

var loadedImg=event.target;

// 将加载后的图片,绘制在画布坐标[dx,dy]处,也就是图片的左上角坐标为[dx,dy]

//就是从左上角(0,0)开始绘制，高度为400.宽度为600

var dx=0, dy=0 ;

//加载图片后再context上进行绘制。

//绘制图像，drawImage有三种方法，

context.drawImage(loadedImg,dx,dy);

};

}

www.Linuxidc.com

对于canvas画布的深度学习：

绘图 context.drawImage

context.drawImage(image,x,y)

image:Image对象var img=new Image(); img.src="url(...)";

x:绘制图像的x坐标

y:绘制图像的y坐标

context.drawImage(image,x,y,w,h)

image:Image对象var img=new Image(); img.src="url(...)";

x:绘制图像的x坐标

y:绘制图像的y坐标

w:绘制图像的宽度

h:绘制图像的高度

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

image:Image对象var img=new Image(); img.src="url(...)";

sx：图像上的x坐标

sy：图像上的y坐标

sw：矩形区域的宽度

sh：矩形区域的高度

dx：画在canvas的x坐标

dy：画在canvas的y坐标

dw：画出来的宽度

dh：画出来的高度

//drawImage(image,x,y)

function draw28(id) {

var image = new Image();

image.src = "Image/html5.jpg";

var canvas = document.getElementById(id);

if (canvas == null)

return false;

var context = canvas.getContext("2d");

context.fillStyle = "#EEEEFF";

context.fillRect(0, 0, 400, 300);

image.onload = function () {

context.drawImage(image,0,0);

}

}

//drawImage(image,x,y,w,h)

function draw12(id) {

var image = new Image();

image.src = "Image/html5.jpg";

var canvas = document.getElementById(id);

if (canvas == null)

return false;

var context = canvas.getContext("2d");

context.fillStyle = "#EEEEFF";

context.fillRect(0, 0, 400, 300);

image.onload = function () {

context.drawImage(image, 50, 50, 300, 200);

}

}

//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

function draw13(id){

var image = new Image();

image.src = "Image/html5.jpg";

var canvas = document.getElementById(id);

if (canvas == null)

return false;

var context = canvas.getContext("2d");

context.fillStyle = "#EEEEFF";

context.fillRect(0, 0, 400, 300);

image.onload = function () {

context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸

}

}

关于canvas学习的详细地址：

http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html