利用JavaScript和Canvas开发游戏必须了解Canvas
用圣才电子书APP或微信扫一扫，在手机上阅读本文，也可分享给你的朋友。
1、认识一下Canvas
Canvas元素以及JavaScript引擎中新增的一些特性，让Web开发人员不必借助第三方插件，即可设计开发出精细且具有交互性的2D网页。这篇文章就向大家介绍一下Canvas元素，以及它的一些可能的用途。
JavaScript与Canvas元素
HTML是为创建静态页面而生的。HTML所能实现的动态效果，也仅限于显示GIF动画和闪烁的文本。JavaScript改变了这一切，通过它能够动态修改网页。今天，很多Web服务都利用AJAX来创建网页，为用户提供更加流畅的体验，也超越了标准HTML页面中常见的&点击-重新加载-点击&式的交互模式。
然而，JavaScript的某些功能会受到其宿主浏览器的制约。尽管可以在网页中创建和修改任何元素，但JavaScript不能(轻易地)让浏览器显示一种新对象。通过JavaScript修改文本、插入图像或者缩放表格都很容易，因为这些对象本来就是HTML所支持的。如果你想再玩得刺激一点，比如写一个网页游戏，怎么办?那恐怕就得苦心积虑地改变标准HTML元素的用途，克服种种不测才能达到目的。要么，你就得求助于Flash或Silverlight这样的插件。
Canvas元素登场了。这个新HTML元素为JavaScript开发者提供了一种无需插件即可在网页中直接绘图的机制。Canvas元素最早是由苹果公司在其WebKit框架中引入的，Safari浏览器和Dashboard微件都在使用。Canvas元素现在也被建议加入了HTML5规范，得到了最新的Chrome、Firefox、Opera以及Konqueror等浏览器的支持。Internet Explorer(至少在IE8之前)还不支持Canvas，但ExplorerCanvas项目倒是为IE提供了与Canvas元素类似的功能。
Canvas元素对做过2D图形编程的人是小菜一碟。可以在这个元素上画线、画各种形状、画渐变，甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能，创建精细且具有交互性的Web应用已经完全没有问题。
我们这一系列文章将教会大家使用JavaScript和Canvas元素创建一个简单的平台游戏。将要涉及的内容包括动画、加载资源、分层渲染、滚动和交互。通过一步一步地展示示例代码和实际效果，你可以很快学会如何驾驭强大的Canvas元素。
2、在Canvas上绘图
/internet/web-development/articles/38744.aspx
下面，我们就通过一个循序渐进的示例及实时演示，来介绍如何使用JavaScript在Canvas元素上绘图及实现动画。
知道了什么是Canvas元素之后，该学习在屏幕上绘图了。首先，需要一个HTML页面来放置和显示Canvas元素。
1.&!DOCTYPE&HTML&PUBLIC&&-//W3C//DTD&HTML&4.01//EN&& &
2.&html&lang=&en&& &
3.&&&&head& &
4.&&&&&&&title&JavaScript&Platformer&1&/title& &
5.&&&&&&&script&type=&text/javascript&&src=&jsplatformer1.js&&&/script& &
6.&&&&&&&style&type=&text/css&& &
7.&&&&&&&&&body&{&Arial,Helvetica,sans-} &
8.&&&&&&&/style& &
9.&&&&/head& &
10.&&&body& &
11.&&&&&&p& &
12.&&&&&&&&&a&href=&/internet/web-development/articles/38364.aspx&& &
13.&&&&&&&&&&&Game&Development&with&Javascript&and&the&canvas&element &
14.&&&&&&&&&/a& &
15.&&&&&&/p& &
16.&&&&&&canvas&id=&canvas&&width=&600&&height=&400&& &
17.&&&&&&&&&p&Your&browser&does&not&support&the&canvas&element.&/p& &
18.&&&&&&/canvas& &
19.&&&/body& &
20./html&&
这些HTML代码很直观。其中有两个重要的元素。
1.&script&type=&text/javascript&&src=&jsplatformer1.js&&&/script&&
这里包含的是将会修改Canvas元素的JavaScript代码，对应的Canvas元素的标记如下：
1.&canvas&id=&canvas&&width=&600&&height=&400&& &
2.&&&&&p&Your&browser&does&not&support&the&canvas&element.&/p& &
3.&/canvas& &
以上代码创建了一个Canvas元素。不支持Canvas的浏览器，比如Internet Explorer(IE8之前的版本)，会忽略这个元素，而只显示其子元素。在这个简单的例子中，这个子元素就是一个段落，其中的文本告诉用户他们的浏览器不支持Canvas元素。而对于那些支持Canvas元素的浏览器，如Chrome、Opera和Firefox，则会忽略Canvas元素的子元素。
这个Canvas元素的ID属性很重要，因为后面的JavaScript将通过它来取得对该元素的引用。而width和height属性指定了画布的宽度和高度，这两个属性跟table或img等其他HTML元素中的同名属性作用一样。
以下是 jsplatformer1.js的代码：
2.//每秒钟target帧&
3.const&FPS&=&30; &
4.var&x&=&0; &
5.var&y&=&0; &
6.var&xDirection&=&1; &
7.var&yDirection&=&1; &
8.var&image&=&new&Image(); &
9.image.src&=&&jsplatformer1-smiley.jpg&; &
10.var&canvas&=&null; &
11.var&context2D&=&null; &
13.window.onload&=& &
14.function&init(){ &
15.&&&&canvas&=&document.getElementById('canvas'); &
16.&&&&context2D&=&canvas.getContext('2d'); &
17.&&&&setInterval(draw,&1000/FPS); &
19.function&draw(){ &
20.&&&&context2D.clearRect(0,&0,&canvas.width,&canvas.height); &
21.&&&&context2D.drawImage(image,&x,&y); &
22.&&&&x&+=&1*&xD &
23.&&&&y&+=&1*&yD &
25.&&&&if&(x&&=&450)&{ &
26.&&&&&&&&x&=&450; &
27.&&&&&&&&xDirection&=&-1; &
28.&&&&}else&if(x&&=&0){ &
29.&&&&&&&&x&=&0; &
30.&&&&&&&&xDirection&=&1; &
31.&&&&} &
32.&&&&if&(y&&=&250)&{ &
33.&&&&&&&&y&=&250; &
34.&&&&&&&&yDirection&=&-1; &
35.&&&&}else&if(y&&=&0){ &
36.&&&&&&&&y&=&0; &
37.&&&&&&&&yDirection&=&1; &
38.&&&&} &
如果只是一个Canvas元素，也没有什么用。JavaScript必须要在这块画布上面画点什么，相应的代码保存在 jsplatformer1.js中。简单来说，JavaScript在这里先加载了一幅图像，然后将其画在画布上面，最后让它在画布上移动。
首先，定义一些全局变量。
1.const&FPS&=&30; &
FPS定义的是画布重绘的频率。
1.var&x&=&0; &
2.var&y&=&0; &
3.var&xDirection&=&1; &
4.var&yDirection&=&1;&
变量x、y、xDirection和yDirection用于定义图像(相对于画布左上角)的位置，以及它在任意一时刻移动的方向。
1.var&image&=&new&Image(); &
2.image.src&=&&http://javascript-/files/jsplatformer1-smiley.jpg&;&
要把图像画到画布上，必须先加载一幅图像。为此，我们创建一个Image对象，将其src属性设置为一幅图像文件的URL(建议把图片下载到本地。&&译者注)。
1.var&canvas&=&null; &
2.var&context2D&=&null;&
我们还需要取得对Canvas元素以及绘图上下文(稍后再详细介绍绘图上下文)的引用。稍后我们会把正确的值赋给这两个变量，现在先把它们设置为null。
1.window.onload&=&&
最后，当页面加载完成后，我们必须知道立即运行绘制画布的代码;因此，在window对象的onload事件发生时，立即调用init函数。
1.function&init(){ &
2.&&&&canvas&=&document.getElementById('canvas'); &
3.&&&&context2D&=&canvas.getContext('2d'); &
4.&&&&setInterval(draw,&1000/FPS); &
页面加载完毕后就会调用上面这个init函数。在这个函数中，我们先通过在HTML文件中指定的ID属性取得画布元素(毫无疑问，除了把它叫做画布，还能叫个啥?)，然后再取得这个画布的2D绘图上下文对象。
上下文对象用于定义如何在画布上绘图。顾名思义，2D上下文嘛，支持在画布上绘制2D图形、图像和文本。支持画布元素的浏览器都支持2D上下文，除了2D上下文，还有其他试验性的上下文对象。Opera有一个专门为游戏设计的2D上下文，而Mozilla则有一个能够显示3D场景的上下文。可惜呀，目前这些上下文对象只有特定的浏览器才支持。如果你想用画布来创建Web应用，最好还是只使用常见的2D上下文。
因为我们在这里是想绘制一幅能移动的图像，所以必须建立渲染循环(render loop)。所谓渲染循环，实际上就是一个被重复调用的函数，渲染循环的每一次迭代，(在这个例子中)都可以让图像在屏幕上产生一点位移，如此循环往复就能给人图像在移动的感觉。为此，我们调用了setInterval函数，它的第一个参数是应该被重复调用的函数，这里的函数名是draw。setInterval函数的第二个参数指定调用函数的频率。这个参数值的单位是毫秒，而用1000除以早先定义的FPS得到的就是每次调用之间相隔的毫秒数。
这里需要注意一下，虽然我们指定每秒钟调用30次draw函数，但实际上不会调用30次。多长时间调用一次draw函数，取决于底层JavaScript引擎的速度和要执行的draw函数代码的复杂程度。如果系统很慢的话，很可能每秒钟只能调用一次draw函数。所以说，这里指定给setInterval的频率只是一种最理想的情况。
在画布上绘图的操作实际上都是由draw函数来完成的。下面我们就一步一步地说明其中的绘图操作。
1.context2D.clearRect(0,&0,&canvas.width,&canvas.height);&
所有绘图操作都是在上下文对象上发生的，并不是在画布元素上发生的。这里首先清空上下文，以便为绘制每一帧画面准备一个干净的版面。
1.context2D.drawImage(image,&x,&y);&
紧接着，就把图像绘制到上下文对象中，参数x和y指定了绘制图像的左上角坐标。
1.x&+=&1&*&xD &
2.y&+=&1&*&yD&
为了让图像在画布上移动，需要根据xDirection和yDirection是等于1(向右或向下)还是等于-1(向左或向上)，来递增或递减x与y的值。
1.if&(x&&=&450){ &
2.&&&&x&=&450; &
3.&&&&xDirection&=&-1; &
4.}&else&if&(x&&=&0)&{ &
5.&&&&x&=&0; &
6.&&&&xDirection&=&1; &
8.if&(y&&=&250)&{ &
9.&&&&y&=&250; &
10.&&&&yDirection&=&-1; &
11.}&else&if&(y&&=&0)&{ &
12.&&&&y&=&0; &
13.&&&&yDirection&=&1; &
如果图像移动到了画布外面，则反转图像的移动方向。我们知道图像的大小是150&150像素，而画布的大小的是600&400像素，因而就有了450(600 & 150)和250(400 & 150)这两个值。
最后的效果就是笑脸图像会在画布的范围内反弹往复。此时此刻，有读者可能会想：同样的效果如果通过修改DIV元素的位置来实现可能更容易一些。这一点我不否认。但这个例子只演示了画布元素所能实现的简单效果。下一篇文章我们就会介绍使用画布元素能够实现的高级效果，同样的效果若采用其他方式，恐怕就要困难多了。
原文作者：Matthew Casperson
来源：网络
小编工资已与此赏挂钩！一赏一分钱！求打赏↓ ↓ ↓
如果你喜欢本文章，请赐赏：
已赐赏的人
我的电子书Js+Html+css（7）
本篇博文可以供大家参考，但是更多的是写给自己作为学习和鞭策，希望大神赐教，谢谢。
这是一个很简单的游戏，通过学习原博文然后进行了一些改造，附上链接。
& & & & 原文：
& & & & 其中还是有很多不好的设计思维，比如主角和怪物并不是分开处理，如果后续有其他的改动会比较麻烦。
& & & & 本篇博文，从头到尾的做一遍，有助于理解游戏的各个流程步骤。
& & & & 完成截图如下：
1.有记分系统
& & & & 2.有碰撞检测
& & & & 3.使用window.requestAnimation()方法来进行刷新，存在兼容性问题
第一部分：初始化html文件和建立Js文件。（ps：资源部分我就不提供了，网上都是。）
建立games文件夹，在文件夹下建立js文件夹和images文件夹以及运行demo.html。
将图片资源放进images，在js文件夹中建立game.js文件。
首先是构建html结构，因为整个游戏全部都用js完成，所以html代码为0，改造一下title，引入一下js文件即可。
具体代码如下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Simple Canvas Game&/title&
&script src=&js/game.js&&&/script&
第二部分：制作流程
做游戏之前首先要明确需求，仓促开始往往适得其反。我们做的游戏是简单的抓怪物游戏，通过玩家按下上下左右四个键来控制英雄的移动以抓住怪物，然后纪录分数。
简单来说就是：游戏开始－&玩家操作－&碰撞检测－&分数统计或者游戏失败－&游戏重新开始。这样一个流程。
对于游戏开始部分，肯定是先有游戏环境和角色才能进行玩家操作，对着一片空白操纵个虾米。那么我们需要什么东西？
1.画布，解决方案：canvas标签。
canvas标签是html5的新标签，我最近才开始学习html，对canvas的理解也比较浅显。总的来说canvas就是一张画布，我们只要通过canvas.context()方法获取到和canvas配对的笔就能在上面画出自己想要的内容。
var canvas = document.createElement(&canvas&);
var ctx = canvas.getContext(&2d&);
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
通过createElement方法创建一个canvas元素，然后获取到与其配对的笔，将canvas的宽高分别设置，最后将canvas加入到body中来。上面这段代码非常好理解。需要注意的是，虽然canvas元素已经建立了，但是现在上面还没有任何的内容。
2.英雄以及怪物图片，解决方案：image对象。
image对象想必大家都不陌生，不赘述了。利用几个flag和onload事件将图片加载进来，这里的这些flag是防止未加载时进行绘制而产生错误。
var bgReady =
var heroReady =
var monsterReady =
var bgImg = new Image();
var heroImg = new Image();
var monsterImg = new Image();
bgImg.onload = function(){
bgImg.src = &images/background.png&;
heroImg.onload = function(){
heroReady =
heroImg.src = &images/hero.png&;
monsterImg.onload = function(){
monsterReady =
monsterImg.src = &images/monster.png&;
3.英雄以及怪物对象，纪录分数的变量
资源已经加载完毕了，我们应该开始构建英雄和怪物的对象。因为游戏非常简单，怪物静止不动只需要刷新，英雄仅仅需要一个速度属性即可，至于分数则应该初始化为0
值得注意的是，对象的书写方式要注意，一不小心多加了分号就会报错。速度先设置为256吧。
var hero = {
var monster = {};
var score = 0;
4.获取用户输入
上面一部分已经将英雄、怪物、背景的对象和资源都构建完毕。接下来我们需要获取到用户的输入，因为是pc端的，默认输入的设备是键盘，所以需要用到keydown，keyup并且需要设置监听。我使用的是addEventListener()，当然这个方法的兼容性不是太好。addEventListener()有三个参数，第一个是event，必须设置，指定的事件名，而且不能带on。比如onclick，只需要click即可。第二个参数是function，必须设置，指定事件触发时执行的函数。第三个则是可选bool值，默认为true即是在冒泡阶段执行。
这里使用了keysDown来存储keyCode。
var keysDown = {};
addEventListener(&keydown&,function(ele){
keysDown[ele.keyCode] =
addEventListener(&keyup&,function(ele){
delete keysDown[ele.keyCode];
5.游戏更新
首先要在外部设立怪物和英雄的初始位置，然后再进行update，在update中逐帧检测，若是碰撞则加分。实际上gameover也应该整合在里面，但是我分开写了。
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
var update = function (modifier) {
if (38 in keysDown) { //up
hero.y -= hero.spd *
if (40 in keysDown) { //down
hero.y += hero.spd *
if (37 in keysDown) { //left
hero.x -= hero.spd *
if (39 in keysDown) { //right
hero.x += hero.spd *
// 碰撞检测与怪物碰撞
if (hero.x &= (monster.x + 32)
&& monster.x &= (hero.x + 32)
&& hero.y &= (monster.y + 32)
&& monster.y &= (hero.y + 32)
6.游戏结束
当玩家碰触到canvas边缘时游戏应该结束。这里没什么好说的，设置over的bool变量。但是这里我遇到了一个问题，console.log方法没有问题，但是换作alert就会不断弹出alert弹窗并且玩家角色无限朝着同一方向转移，想了很久并没有结论，希望哪位能指导一下。var over =//重置位置的条件是游戏失败。初始时设为false，当失败后重置为true。
var gameOver = function(){
if (hero.x &= canvas.width || hero.x &= 0 || hero.y &= 0 || hero.y &= canvas.height){
score = 0;
console.log(&You have lose the game!&);
7.重置位置
游戏如果结束，才重置英雄的位置。这里实际上是有问题的，因为怪物的位置重置和英雄的产生了耦合。总的来说，整个游戏还有比较大的优化空间。var reset = function(){
if(over == true){
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
8.绘制canvas
通过获取canvas对象来进行canvas绘制，这是很重要的一步，进行了这步就可以将所有的画面展示出来。这里就用到了开始的flag bgready这些东西
var render = function () {
if (bgReady) {
ctx.drawImage(bgImg, 0, 0);
if (heroReady) {
ctx.drawImage(heroImg, hero.x, hero.y);
if (monsterReady) {
ctx.drawImage(monsterImg, monster.x, monster.y);
ctx.fillStyle = &rgb(250, 250, 250)&;
ctx.font = &24px Helvetica&;
ctx.textAlign = &left&;
ctx.textBaseline = &top&;
ctx.fillText(&Goblins caught: & + score, 32, 32);
9.游戏主循环
最后，我们可以来愉快的开始游戏了。只需要一个简单的main函数。这里用到了 requestAnimationFrame()方法，实际上有很多其他方法可以实现，这个东西的兼容性不是很好。最后，整个游戏好像能够完整的跑起来了，隐藏在深处的错误能否暴露在大家的火眼之下呢。希望大家看过后能留言交流，帮助一下残障儿童，谢谢！
var main = function () {
var now = Date.now();
var delta = now -
update(delta / 1000);
gameOver();
if(over == false){
requestAnimationFrame(main);//绘制动画，匹配60fps更新。
var then = Date.now();
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1064次
排名：千里之外
原创：10篇刚刚接触H5-canvas游戏的开发，写一下这段时间游戏开发的总结
自制的一个h5小游戏：
基本概念：
视频 -- 即是通过无数的静态图片组合起来，通过一定的频率切换而组成的一种视觉动态效果
游戏 -- 同样是无数的静态图片的组合，但不同的是，每一帧生成的图片都是通过游戏内部逻辑进行生成的，如：
　　玩家通过鼠标点击一个按钮，游戏内部逻辑会对此事件进行处理，后生成鼠标点击这个行为的图片
　　现如今对于游戏的频率，最佳的体验是在一秒60帧，这样的频率，可以让视觉和操作体验上达到最佳
游戏开发：
使用面向对象的开发模式，将游戏中的每个元素设计成类和对象的关系，可以更好的开发游戏 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&
canvas方法：
window.setTimeout(callback, 1000 / 60) -- 游戏帧数控制，一千毫秒刷新60次，使用setTimeout，等运行的方法结束后再计时.
isPointInPath（x,y）-- 判断当前坐标是否在当前路径中，x，y为目标坐标，（注：canvas使用beginPath()、closePath开启路径和关闭路径，此方法判断的时候是以最近的路径作为区域判断）
　　　　与html直接监听标签的各种事件不一样，canvas的监听是通过此方法结合事件监听判断坐标的方式确定当前坐标是否在目标区域&
arc(圆心横坐标,圆心纵坐标,半径,起始角,结束角,方向) -- 画圆弧路径，画圆的写法arc(圆心横坐标,圆心纵坐标,半径,0,2*Math.PI)
rect(x, y, width, height) -- 画矩形路径，x,y为矩形左上角坐标
moveTo(x,y) -- 指定路径的起始坐标
lineTo(x,y) -- 画一条直线路径，x,y为结束坐标，一般以上一个lineTo的结束坐标作为起始坐标，可以使用moveTo指定起始坐标
drawImage(img,sx,sy,swidth,sheight,x,y,width,height) -- 引进图片并显示在画布指定位置上，需new一个image对象，
　　　　　　var img = new Image();
　　　　　　img.src="...";
　　　　　　img.onload = function(){
　　　　　　　　canvas.drawImage(img,x,y,width,height);
　　　　　　}
监听事件：
canvas.addEventListener（1，2，3） &-- &监听画布事件，第一个参数为事件名，第二个参数为调用方法，第三个为指定执行时机，默认false
常用事件--
canvas.addEventListener("click", function(){},false) ;监听鼠标点击 canvas.addEventListener("mousemove", &function(){},false);监听鼠标移动 canvas.addEventListener('keydown', &function(){}, false);监听键盘按键，需在&canvas &tabindex="0"&标签上加tabindex="0"启动，且需聚焦canvas画布focus()
以下是通过做好的一个小游戏整理出来的简单开发框架
先列出目录结构
variable.js--放置全局变量
main.js--主函数运行
gameClass.js--游戏使用类
common.js--公共方法
展示简单开发模版的代码
game.html：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&H5-Game&/title&
.canvas{position:absolute;left:50%;margin-left:-480px}
&canvas id="bg-canvas" class="canvas" tabindex="0" width="960" height="600" style="position:absolute"&&/canvas&
&canvas id="canvas" class="canvas" tabindex="0" width="960" height="600"&&/canvas&
&script src="js/variable.js"&&/script&
&script src="js/main.js"&&/script&
&script src="js/common.js"&&/script&
&script src="js/gameClass.js"&&/script&
function getMovePosition(ev){
//返回移动坐标
if (ev.layerX || ev.layerX == 0){
moveX = ev.layerX;
moveY = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
moveX = ev.offsetX;
moveY = ev.offsetY;
function getClickPosition(ev){
//返回点击坐标
clickChip=1;
if(ev.layerX || ev.layerX == 0){
clickX = ev.layerX;
clickY = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
clickX = ev.offsetX;
clickY = ev.offsetY;
function isTrueListener(x,y){
//判断坐标是否当前位置，返回true or false
if(ctx.isPointInPath(x,y)){
return true;
return false;
function getKeyDown(e) {
//返回鼠标按下的键值
keyDown=e.keyCode ? e.keyCode :e.
function requestAnimFrame(callback,element){
//游戏刷新速率
return window.setTimeout(callback, 1000 / 60);
function getXMLHttpRequest(){
//返回适用当前环境request对象，数据交互
return new ActiveXobject("Microsoft.XMLHTTP");
return new ActiveXobject("Msxm12.XMLHTTP");
return new XMLHttpRequest();
variable.js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bgCanvas = document.getElementById("bg-canvas");
var bgCtx = bgCanvas.getContext("2d");
var clickX;
var clickY;
var moveX;
var moveY;
var keyDown=null;
var canvasWidth = canvas.offsetW
var canvasHeight = canvas.offsetH
document.body.onload=
//启动游戏
function game(){
//初始化元素对象
//游戏函数
function backDraw(){
//背景，静态元素
bgImgae = new Image();
bgImgae.src="bg.jpg";
bgImgae.onload = function(){
bgCtx.drawImage(bgImgae, 0, 0);
function init(){
canvas.addEventListener("click", getClickPosition,false);
//监听鼠标点击
canvas.addEventListener("mousemove", getMovePosition,false);
//监听鼠标移动
canvas.addEventListener('keydown', getKeyDown, false);
//监听键盘
//聚焦canvas画布时触发
canvas.focus();
backDraw();
//初始化静态元素，执行一次
function loops(){
//循环游戏动态元素
stop = requestAnimFrame(loops);
ctx.clearRect(0,0,960,600)
ctx.fillStyle="rgba(0,0,0,0.4)";
ctx.rect(0,0,canvasWidth,canvasHeight);
ctx.fill();
不对之处请指正
个人原创，转载请注明来源
注：小疯纸的yy
阅读(...) 评论()Cocos2d引擎为游戏开发者提供了屏幕适配策略（Resolution Policy）解决方案。
1. 设置屏幕适配策略（Resolution Policy）
　　如果你还没有用过Resolution Policy，只需要在游戏载入过程完成之后（cc.game.onStart函数回调中），调用下面的代码：
cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
　　setDesignResolutionSize函数的前两个参数是你想要在你的代码中使用的游戏分辨率，第三个参数就是你选择的适配方案。引擎中内置了5种适配方案
　　如果你已经设置了设计分辨率，那么你可以直接设置你的Resolution Policy：
cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);
&　　原生游戏中游戏总是使用全部屏幕空间，但是在WEB端你的网页中也许除了游戏还有别的视觉或文字元素，或者也许你需要给你的游戏设计一个漂亮的边框。所以 Cocos2d-JS中Web引擎的适配方案会默认适配游戏Canvas元素的父节点，如果你希望游戏场景适配浏览器屏幕，那么只需要将Canvas直接 放置到body下就可以了
2. Resolution Policy的意义
使用Resolution Policy的好处很明显，不论设备屏幕大小如何，也不论浏览器窗口的宽高比，你的游戏场景都会被自动放缩到屏幕大小。更重要的是，在游戏代码中，你将永 远使用你所设计的游戏分辨率来布置游戏场景。比如说，如果你将设计分辨率设置为320 * 480，那么在游戏代码中你的游戏窗口右上角坐标将永远是(320, 480)(在FIXED_WIDTH模式高度可能会被缩放，同样在FIXED_HEIGHT模式下宽度可能存在缩放的情况，具体看下文说明)。
3. 监听浏览器窗口大小变化事件
新的适配方案允许在浏览器大小变化的时候自动重新尝试适配。比如说，当用户拖拽来改变浏览器大小，或者更有用的情况，当他们转动自己手机方向的时候。游戏中任意时刻都可以开启这种行为，只需要调用cc.view的resizeWithBrowserSize函数：
cc.view.resizeWithBrowserSize(true);
&为了更灵活得应对变化，我们为cc.view提供了一个新的函数，你可以通过setResizeCallback函数注册一个回调函数来监听浏览器窗口大小变化事件：
cc.view.setResizeCallback(function() {
// 做任何你所需要的游戏内容层面的适配操作
// 比如说，你可以针对用户的移动设备方向来决定所要应用的适配模式
4. Fullscreen API
Fullscreen API是浏览器允许Web页面在获得用户全屏幕的一个新的制定中的API。
Cocos2d-JS在移动端浏览器中会尝试自动进入全屏幕来给用户更好的游戏体验（需要指出并不是所有浏览器都支持这个API）。
另一方面，桌面端几乎所有现代浏览器都支持Fullscreen API，如果你希望使用这个API，Cocos2d-JS也简化了它的使用方式：
尝试进入全屏模式（需要用户交互）: cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
检测是否处于全屏模式: cc.screen.fullScreen();
退出全屏模式: cc.screen.exitFullScreen();
　　1. 游戏外框 Frame
　　　　游戏外框是你的游戏Canvas元素的初始父节点，一般情况下，它是html文档的body元素。但是如果你愿意，它可以是DOM结构中的任意容器节点。Canvas元素的初始大小并不重要，屏幕适配过程中它会被自动放缩来适应你设置的外框大小。 再次提醒，如果你希望游戏窗口适应整个浏览器窗口，那么只需要将Canvas元素直接放在body下。
　　2. 游戏容器 Container
　　　　在Cocos2d-JS的初始化进程中，引擎会自动将你的Canvas元素放置到一个DIV容器中，而这个容器会被加入到Canvas的原始父节点（游戏外框）中。这个游戏容器是实现屏幕适配方案的重要辅助元素，你可以通过cc.container来访问它。
　　3. 游戏世界 Content
　　　　游戏世界代表游戏内使用的世界坐标系。
　　4. 视窗 Viewport
　　　　视窗是游戏世界相对于游戏Canvas元素坐标系中的坐标及大小.
　　5. 容器适配策略 Container Strategy
　　　　容器适配策略负责对游戏容器和游戏Canvas元素进行放缩以适应游戏外框。
　　6. 内容适配策略 Content Strategy
　　　　内容适配策略负责将游戏世界放缩以适应游戏容器，同时也会计算并设置视窗。
系统预设适配模式
　　在Cocos2d-JS中预设了5种适配模式，下面将图解每种适配模式的行为。图中红色方框指示的是游戏世界的边界，而绿色方框指示的是Canvas元素的边界。
所有适配模式都是由一个容器适配策略搭配一个内容适配策略所组成的，括号中显示的是每个模式的构成方式。
　　1. SHOW_ALL (PROPORTION_TO_FRAME + SHOW_ALL)
&　　　　SHOW_ALL模式会尽可能按原始宽高比放大游戏世界以适配外框(Frame)，同时使得游戏内容全部可见，所以浏览器宽高比不同于游戏宽高比时，窗口中会有一定的留白。留白部分的颜色或背景可以通过设置外框的CSS属性来修改。
　　2. NO_BORDER (EQUAL_TO_FRAME + NO_BORDER)
　　　　NO_BORDER模式会尽可能按原始宽高比放大游戏世界以适配外框，并且保证不留空白。所以浏览器宽高比不同于游戏宽高比时，游戏世界会被部分切割。同时，在这种情况下，cc.visibleRect代表的就是Canvas在游戏世界中的视窗，大小比cc.winSize要小一些。
　　3. EXACT_FIT (EQUAL_TO_FRAME + EXACT_FIT)
　　　　EXACT_FIT模式会忽略原始宽高比放大游戏世界以完全适应外框，所以浏览器宽高比不同于游戏宽高比时，游戏世界会被一定程度拉伸。　　　　
　　　　FIXED_WIDTH模式会横向放大游戏世界以适应外框的宽度，纵向按原始宽高比放大。结果有两种可能，类似与SHOW_ALL模式的结果（如 图），或者类于NO_BORDER模式。它与前面两种模式的差别在于，在FIXED_WIDTH模式下游戏世界坐标系等同于Canvas元素坐标系，并且 Canvas元素必然占满整个外框。
　　　　注意下与SHOW_ALL模式的区别，此时Canvas大小是整个外框大小，所以可显示内容区域实际上比SHOW_ALL模式更多。
　　5. FIXED_HEIGHT (EQUAL_TO_FRAME + FIXED_HEIGHT)　　　　
　　　　与前一个模式相反，FIXED_HEIGHT模式会纵向放大游戏世界以适应外框的高度，横向按原始宽高比放大。结果同上。
　　　　在这个模式下，与NO_BORDER模式的区别是此时游戏世界坐标系和大小等同于Canvas坐标系。
用系统预设策略来构建适配模式
如你所看到的，所有预设模式都是预设策略的组合，你也可以做到同样的事情，系统预设策略如下所示：
　　Container strategies: 容器适配策略
cc.ContainerStrategy.EQUAL_TO_FRAME // 使容器大小等同于外框
cc.ContainerStrategy.PROPORTION_TO_FRAME // 使容器大小按原始宽高比放大以适应外框
cc.ContainerStrategy.ORIGINAL_CONTAINER // 原始容器大小
　　Content strategies 内容适配策略
cc.ContentStrategy.SHOW_ALL
cc.ContentStrategy.NO_BORDER
cc.ContentStrategy.EXACT_FIT
cc.ContentStrategy.FIXED_WIDTH
cc.ContentStrategy.FIXED_HEIGHT
阅读(...) 评论()