首先放置源代码：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>My first Game</title>
<style type="text/css">
/** body 整个空间页面 */
body {
/** 边框：无 0像素 */
border:none 0px;
/** 边外补白：向外填充0像素 */
margin:0px;
/** 向内填充：向内填充0像素 距上级边框0像素 */
padding:10px;
/** 设置字体大小 16px = 1em */
font-size : 16px;
/** 背景颜色：#f3f3f3 */
background-color : #f3f3f3;
}
/** 画布 canvas */
canvas {
/** 边框：1像素 实线 蓝色 */
border : 1px solid blue;
}
</style>
<script type="text/javascript">
//一个简单的图片加载函数, callback为当所有图片加载完毕后的回调函数.
function loadImage(srcList,callback){
// 数组变量，存放img
var imgs={};
// 变量存放srcList的长度
var totalCount=srcList.length;
// 变量 计算加载图片的数量
var loadedCount=0;
// 加载srcList中的图片
for (var i=0;i<totalCount;i ){
// 获取图片
var img=srcList[i];
// 利用img的id 来创建一个新的Image对象
var image=imgs[img.id]=new Image();
// 复制img的URL到创建的image对象的URL中
image.src=img.url;
// 启动image的onload事件
image.οnlοad=function(event){
// 如果启动，加载数量加1
loadedCount ;
}
}
if (typeof callback=="function"){
// 如果是回调函数，那么检查下加载数量是否大于srcList的长度
var Me=this;
function check(){
if (loadedCount>=totalCount){
callback.apply(Me,arguments);//check继承callback的属性和方法
}else{
setTimeout(check,100);
}
}
check();
}
return imgs;
}
// 图像缓存变量
var ImgCache=null;
// 画布 canvas
var canvas=null;
// 画布上下文，利用它来绘制图像
var context=null;
function init(){
// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
canvas=document.createElement("canvas");
//设置canvas对象的高度和宽度
canvas.width=600;
canvas.height=400;
//将canvas加入到body的末尾
document.body.appendChild(canvas);
// 取得2d绘图上下文
context= canvas.getContext("2d");
//将加载的所有图片存入ImgCache, 图片加载完成后, 调用startDemo
// loadImage（srcList，callback）
// loadImage（[{},{}]，startDemo）
// 请仔细看{}里面的组成，就可以知道srcList的内容有哪些。（此处只含有id和URL）
// ../表示根目录
// 下面的程序表示现将图像player.png和图像bg.png存放到缓存ImgCache中
ImgCache=loadImage( [
{ id : "player",
url : "../res/player.png"
},
{ id : "bg",
url : "../res/bg.png"
}
],
startDemo );
}
function startDemo(){
// Demo展示电脑图形与音乐的程式
// 绘制背景
// 表示从左上角（0，0）位置开始绘制
var dx=0, dy=0 ;
// 首先加载背景图
context.drawImage(ImgCache["bg"],dx,dy);
//绘制站在地上的player, 坐标为200,284
// 绘制玩家角色图像
var sx=0, sy=60, sw=50, sh=60;
var dx=400, dy=284, dw=50, dh=60;
// 选取图像的一部分矩形区域进行绘制
// sx：图像上的x坐标 表示从player图像上截取的x坐标
// sy：图像上的y坐标 表示从player图像上截取的y坐标
// sw：矩形区域的宽度
// sh：矩形区域的高度
// dx：画在canvas的x坐标
// dy：画在canvas的y坐标
<span style="white-space:pre"> </span>// dw：画出来的宽度
// dh：画出来的高度
// ImgCache["player"]表示从图像缓存中取出player图像
context.drawImage(ImgCache["player"], sx, sy, sw, sh, dx, dy, dw, dh );
}
</script>
</head>
<body οnlοad="init()">
<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>运行截图：
有不对的地方还请各位高手指正
