- 将画布元素添加到 DOM。
- 添加画布元素定位样式,以便支持分层。
- 样式化画布元素,以便生成一个透明的背景。
#viewport {
/**
* Position relative so that canvas elements
* inside of it will be relative to the parent
*/
position: relative;
}
#viewport canvas {
/**
* Position absolute provides canvases to be able
* to be layered on top of each other
* Be sure to remember a z-index!
*/
position: absolute;
}
canvas {
/**
* Set transparent to let any other canvases render through
*/
background-color: transparent;
}
/**
* Render call
*
* @param {CanvasRenderingContext2D} context Canvas context
*/
function renderLoop(context)
{
context.clearRect(0, 0, width, height);
background.render(context);
ground.render(context);
hills.render(context);
cloud.render(context);
player.render(context);
}
var Entity = function() {
/**
Initialization and other methods
**/
/**
* Render call to draw the entity
*
* @param {CanvasRenderingContext2D} context
*/
this.render = function(context) {
context.drawImage(this.image, this.x, this.y);
}
};
var PanningEntity = function() {
/**
Initialization and other methods
**/
/**
* Render call to draw the panned entity
*
* @param {CanvasRenderingContext2D} context
*/
this.render = function(context) {
context.drawImage(
this.image,
this.x - this.width,
this.y - this.height);
context.drawImage(
this.image,
this.x,
this.y);
context.drawImage(
this.image,
this.x + this.width,
this.y + this.height);
}
};
- 背景 - 黑色
- 云 - 红色
- 小山 - 绿色
- 地面 - 蓝色
- 红球 - 蓝色
- 黄色障碍物 - 蓝色
ar PanningEntity = function() {
/**
Initialization and other methods
**/
/**
* Render call to draw the panned entity
*
* @param {CanvasRenderingContext2D} context
*/
this.render = function(context) {
context.clearRect(
this.x,
this.y,
context.canvas.width,
this.height);
context.drawImage(
this.image,
this.x - this.width,
this.y - this.height);
context.drawImage(
this.image,
this.x,
this.y);
context.drawImage(
this.image,
this.x + this.width,
this.y + this.height);
}
};
var DirtyRectManager = function() {
// Set the left and top edge to the max possible
// (the canvas width) amd right and bottom to least-most
// Left and top will shrink as more entities are added
this.left = canvas.width;
this.top = canvas.height;
// Right and bottom will grow as more entities are added
this.right = 0;
this.bottom = 0;
// Dirty check to avoid clearing if no entities were added
this.isDirty = false;
// Other Initialization Code
/**
* Other utility methods
*/
/**
* Adds the dirty rect parameters and marks the area as dirty
*
* @param {number} x
* @param {number} y
* @param {number} width
* @param {number} height
*/
this.addDirtyRect = function(x, y, width, height) {
// Calculate out the rectangle edges
var left = x;
var right = x + width;
var top = y;
var bottom = y + height;
// Min of left and entity left
this.left = left < this.left ? left : this.left;
// Max of right and entity right
this.right = right > this.right ? right : this.right;
// Min of top and entity top
this.top = top < this.top ? top : this.top;
// Max of bottom and entity bottom
this.bottom = bottom > this.bottom ? bottom : this.bottom;
this.isDirty = true;
};
/**
* Clears the rectangle area if the manager is dirty
*
* @param {CanvasRenderingContext2D} context
*/
this.clearRect = function(context) {
if (!this.isDirty) {
return;
}
// Clear the calculated rectangle
context.clearRect(
this.left,
this.top,
this.right - this.left,
this.bottom - this.top);
// Reset base values
this.left = canvas.width;
this.top = canvas.height;
this.right = 0;
this.bottom = 0;
this.isDirty = false;
}
};
- 帧 1 - 实体在碰撞,几乎重叠。
- 帧 2 - 实体重绘区域是重叠的。
- 帧 3 - 重绘区域重叠,并被收集到一个脏矩形中。
- 帧 4 - 脏矩形被清除。
![Web大前端开发直播班](http://m.sbmmt.com/img/upload/aroundimg/000/000/071/62566f0ccc0d9487.png)
相关文章推荐
• 深入解析asp.net中mvc4自定义404页面(分享)• 在今天,利用 HTML5 开发和发布大型跨平台网游,可行性如何?要解决哪些问题?• 避免常见的六种HTML5错误用法 (5-6)• phonegap使用方法介绍(八)操作数据库• 在HTML5 Canvas中放入图片和保存为图片的方法_html5教程技巧独孤九贱(3)_JavaScript视频教程
javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。
JavaScript教程121258次播放
独孤九贱(6)_jQuery视频教程
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程100393次播放
传智播客JavaScript面向对象完成贪吃蛇游戏视频教程
《传智播客JavaScript面向对象完成贪吃蛇游戏视频教程》介绍了关于JavaScript面向对象的知识,利用面向对象的编程思想去完成贪吃蛇游戏。
JavaScript教程4300次播放
JavaScript入门基础视频教程
《JavaScript入门基础视频教程》本节课程中从JS的基础开始讲起,很适合新手学习哦!想学习JS方面知识的可以来看本节课程哦!!后面还有对JS的扩展哦!!
JavaScript教程9009次播放
jQuery入门基础视频教程
《jQuery入门基础视频教程》本节课中从jQuery的基础开始讲起,很适合新手学习哦!废话也就不说那么多了,没接触过jquery的小伙伴们可以来学习学习哦!!
jQuery教程6898次播放