HTML5 Canvas 学习之一
创建父类
//公用 定义一个游戏物体戏对象 function GameObject() { this.x = 0;//x 坐标 this.y = 0;//y 坐标 this.image = null; //图片 }
创建一个子类
//定义公用蘑菇Mushroom 继承游戏对象GameObject function Mushroom() {}; Mushroom.prototype = new GameObject();//游戏对象GameObject //蘑菇实例 var mushroom = new Mushroom(); mushroom.image = mushroomImg; //设置蘑菇的图片 new Image()对象 mushroom.x = parseInt(screenWidth/2); mushroom.y = screenHeight - 40; //蘑菇图片高度为40,为了能完整显示蘑菇
画图方法
var ctx = document.getElementById('mycanvas').getContext('2d'); //获取2d画布的方法 screenWidth = parseInt($("#mycanvas").attr("width")); //屏幕宽度 screenHeight = parseInt($("#mycanvas").attr("height")); //屏幕高度 setInterval(gameLoop, 10); //一直画画画画画 //循环描绘物体 function gameLoop() { //清除屏幕 ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); //绘制背景 ctx.drawImage(backgroundForestImg, 0, 0); //绘制蘑菇 ctx.drawImage(mushroom.image, mushroom.x, mushroom.y); ctx.restore(); }
通过var ctx = DOM对象.getContext('2d');获取2D画布
ctx.clearRect(x,y,宽度,高度);清除一个矩形内的东西
ctx.save();保存
ctx.drawImage(new Image()对象, x, y); 画图
ctx.restore(); 执行?
$(对象).mousemove(function(e){
e.pageX获取鼠标在这个对象里面的X坐标
e.pageY获取鼠标在这个对象里面的Y坐标
})
对象
function obj(){
this.属性1;
this.属性2;
this.属性3;
}
继承
function Son(){}
son.prototype = new obj();
var son = new Son();
son.属性1;
son.属性2;
son.属性3;
效果：
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo</title> <script src="js/jquery-1.7.1.min.js"></script> <script> //全局变量 var backgroundForestImg = new Image();//森林背景图 var mushroomImg = new Image();//蘑菇图 var ctx;//2d画布 var screenWidth;//画布宽度 var screenHeight;//画布高度 mushroomImg.src = "images/mushroom.png";//蘑菇 backgroundForestImg.src = "images/forest1.jpg";//森林背景图 screenWidth = parseInt($("#mycanvas").attr("width")); screenHeight = parseInt($("#mycanvas").attr("height")); //公用 定义一个游戏物体戏对象 function GameObject() { this.x = 0;//x 坐标 this.y = 0;//y 坐标 this.image = null; //图片 } //定义公用蘑菇Mushroom 继承游戏对象GameObject function Mushroom() {}; Mushroom.prototype = new GameObject();//游戏对象GameObject //蘑菇实例 var mushroom = new Mushroom(); mushroom.image = mushroomImg; mushroom.x = parseInt(screenWidth/2); mushroom.y = screenHeight - 40; //循环描绘物体 function gameLoop() { //清除屏幕 ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); //绘制背景 ctx.drawImage(backgroundForestImg, 0, 0); //绘制蘑菇 ctx.drawImage(mushroom.image, mushroom.x, mushroom.y); ctx.restore(); } //事件处理 function addEventHandlers() { //鼠标移动则蘑菇跟着移动 $("#container").mousemove(function(e){ mushroom.x = e.pageX - (mushroom.image.width/2); $("#X_y").html("X:"+e.pageX+",mushroom:"+mushroom.image.width/2); }); } //初始化 $(document).ready(function(){ addEventHandlers();//加上事件 // loadImages(); ctx = document.getElementById('mycanvas').getContext('2d'); //获取2d画布 mushroom.image = mushroomImg; screenWidth = parseInt($("#mycanvas").attr("width")); screenHeight = parseInt($("#mycanvas").attr("height")); mushroom.x = parseInt(screenWidth/2); mushroom.y = screenHeight - 40; setInterval(gameLoop, 10); }); </script> </head> <body> <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;"> <canvas id="mycanvas" width="480" height="320" > </canvas> </div> <span id="X_y"></span> </body> </html>
蘑菇图片下载地址：http://www.html5china.com/html5games/mogu/images/mushroom.png
背景图片下载地址：http://www.html5china.com/html5games/mogu/images/forest1.jpg
来自：html5中文网
作者：深邃老马
