使用JavaScript和Canvas开发游戏之认识Canvas

1、认识一下Canvas

眉县ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

http://www.brighthub.com/internet/web-development/articles/38364.aspx

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上绘图

http://www.brighthub.com/internet/web-development/articles/38744.aspx

下面，我们就通过一个循序渐进的示例及实时演示，来介绍如何使用JavaScript在Canvas元素上绘图及实现动画。

准备工作

知道了什么是Canvas元素之后，该学习在屏幕上绘图了。首先，需要一个HTML页面来放置和显示Canvas元素。

 
 
 
      
  
  
  1.   
    2.   
  
  
  2.   
    3.   
  
  
  3.      
    4.   
  
  
  4.       JavaScript Platformer 1  
    5.   
  
  
  5.         
    6.   
  
  
  6.         
    7.   
  
  
  7.          body { font-family: Arial,Helvetica,sans-serif;}  
    8.   
  
  
  8.         
    9.   
  
  
  9.      
    10.   
  
  
  10.     
    11.   
  
  
  11.      
      
    12.   
  
  
  12.           
    13.   
  
  
  13.            Game Development with Javascript and the canvas element  
    14.   
  
  
  14.           
    15.   
  
  
  15.      
      
    16.   
  
  
  16.        
    17.   
  
  
  17.         
    Your browser does not support the canvas element.
      
    18.   
  
  
  18.        
    19.   
  
  
  19.     
    20.   
  
  
  20. /html> 
    21.

这些HTML代码很直观。其中有两个重要的元素。

 
 
 
      
  
  
  1.  
    2.

这里包含的是将会修改Canvas元素的JavaScript代码，对应的Canvas元素的标记如下：

 
 
 
      
  
  
  1.   
    2.   
  
  
  2.     
    Your browser does not support the canvas element.
      
    3.   
  
  
  3.   
    4.

以上代码创建了一个Canvas元素。不支持Canvas的浏览器，比如Internet Explorer(IE8之前的版本)，会忽略这个元素，而只显示其子元素。在这个简单的例子中，这个子元素就是一个段落，其中的文本告诉用户他们的浏览器不支持Canvas元素。而对于那些支持Canvas元素的浏览器，如Chrome、Opera和Firefox，则会忽略Canvas元素的子元素。

这个Canvas元素的ID属性很重要，因为后面的JavaScript将通过它来取得对该元素的引用。而width和height属性指定了画布的宽度和高度，这两个属性跟table或img等其他HTML元素中的同名属性作用一样。

以下是 jsplatformer1.js的代码：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2. //每秒钟target帧  
    3.   
  
  
  3. const FPS = 30;  
    4.   
  
  
  4. var x = 0;  
    5.   
  
  
  5. var y = 0;  
    6.   
  
  
  6. var xDirection = 1;  
    7.   
  
  
  7. var yDirection = 1;  
    8.   
  
  
  8. var image = new Image();  
    9.   
  
  
  9. image.src = "jsplatformer1-smiley.jpg";  
    10.   
  
  
  10. var canvas = null;  
    11.   
  
  
  11. var context2D = null;  
    12.   
  
  
  12.  
    13.   
  
  
  13. window.onload = init;  
    14.   
  
  
  14. function init(){  
    15.   
  
  
  15.     canvas = document.getElementById('canvas');  
    16.   
  
  
  16.     context2D = canvas.getContext('2d');  
    17.   
  
  
  17.     setInterval(draw, 1000/FPS);  
    18.   
  
  
  18. }  
    19.   
  
  
  19. function draw(){  
    20.   
  
  
  20.     context2D.clearRect(0, 0, canvas.width, canvas.height);  
    21.   
  
  
  21.     context2D.drawImage(image, x, y);  
    22.   
  
  
  22.     x += 1* xDirection;  
    23.   
  
  
  23.     y += 1* yDirection;  
    24.   
  
  
  24.  
    25.   
  
  
  25.     if (x >= 450) {  
    26.   
  
  
  26.         x = 450;  
    27.   
  
  
  27.         xDirection = -1;  
    28.   
  
  
  28.     }else if(x <= 0){  
    29.   
  
  
  29.         x = 0;  
    30.   
  
  
  30.         xDirection = 1;  
    31.   
  
  
  31.     }  
    32.   
  
  
  32.     if (y >= 250) {  
    33.   
  
  
  33.         y = 250;  
    34.   
  
  
  34.         yDirection = -1;  
    35.   
  
  
  35.     }else if(y <= 0){  
    36.   
  
  
  36.         y = 0;  
    37.   
  
  
  37.         yDirection = 1;  
    38.   
  
  
  38.     }  
    39.   
  
  
  39. }  
    40.

如果只是一个Canvas元素，也没有什么用。JavaScript必须要在这块画布上面画点什么，相应的代码保存在 jsplatformer1.js中。简单来说，JavaScript在这里先加载了一幅图像，然后将其画在画布上面，***让它在画布上移动。

首先，定义一些全局变量。

 
 
 
      
  
  
  1. const FPS = 30;  
    2.

FPS定义的是画布重绘的频率。

 
 
 
      
  
  
  1. var x = 0;  
    2.   
  
  
  2. var y = 0;  
    3.   
  
  
  3. var xDirection = 1;  
    4.   
  
  
  4. var yDirection = 1; 
    5.

变量x、y、xDirection和yDirection用于定义图像(相对于画布左上角)的位置，以及它在任意一时刻移动的方向。

 
 
 
      
  
  
  1. var image = new Image();  
    2.   
  
  
  2. image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg"; 
    3.

要把图像画到画布上，必须先加载一幅图像。为此，我们创建一个Image对象，将其src属性设置为一幅图像文件的URL(建议把图片下载到本地。——译者注)。

 
 
 
      
  
  
  1. var canvas = null;  
    2.   
  
  
  2. var context2D = null; 
    3.

我们还需要取得对Canvas元素以及绘图上下文(稍后再详细介绍绘图上下文)的引用。稍后我们会把正确的值赋给这两个变量，现在先把它们设置为null。

 
 
 
      
  
  
  1. window.onload = init; 
    2.

***，当页面加载完成后，我们必须知道立即运行绘制画布的代码;因此，在window对象的onload事件发生时，立即调用init函数。

init函数

 
 
 
      
  
  
  1. function init(){  
    2.   
  
  
  2.     canvas = document.getElementById('canvas');  
    3.   
  
  
  3.     context2D = canvas.getContext('2d');  
    4.   
  
  
  4.     setInterval(draw, 1000/FPS);  
    5.   
  
  
  5. }  
    6.

页面加载完毕后就会调用上面这个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函数

在画布上绘图的操作实际上都是由draw函数来完成的。下面我们就一步一步地说明其中的绘图操作。

 
 
 
      
  
  
  1. context2D.clearRect(0, 0, canvas.width, canvas.height); 
    2.

所有绘图操作都是在上下文对象上发生的，并不是在画布元素上发生的。这里首先清空上下文，以便为绘制每一帧画面准备一个干净的版面。

 
 
 
      
  
  
  1. context2D.drawImage(image, x, y); 
    2.

紧接着，就把图像绘制到上下文对象中，参数x和y指定了绘制图像的左上角坐标。

 
 
 
      
  
  
  1. x += 1 * xDirection;  
    2.   
  
  
  2. y += 1 * yDirection; 
    3.

为了让图像在画布上移动，需要根据xDirection和yDirection是等于1(向右或向下)还是等于-1(向左或向上)，来递增或递减x与y的值。

 
 
 
      
  
  
  1. if (x >= 450){  
    2.   
  
  
  2.     x = 450;  
    3.   
  
  
  3.     xDirection = -1;  
    4.   
  
  
  4. } else if (x <= 0) {  
    5.   
  
  
  5.     x = 0;  
    6.   
  
  
  6.     xDirection = 1;  
    7.   
  
  
  7. }  
    8.   
  
  
  8. if (y >= 250) {  
    9.   
  
  
  9.     y = 250;  
    10.   
  
  
  10.     yDirection = -1;  
    11.   
  
  
  11. } else if (y <= 0) {  
    12.   
  
  
  12.     y = 0;  
    13.   
  
  
  13.     yDirection = 1;  
    14.   
  
  
  14. } 
    15.

如果图像移动到了画布外面，则反转图像的移动方向。我们知道图像的大小是150×150像素，而画布的大小的是600×400像素，因而就有了450(600 – 150)和250(400 – 150)这两个值。

***的效果就是笑脸图像会在画布的范围内反弹往复。此时此刻，有读者可能会想：同样的效果如果通过修改DIV元素的位置来实现可能更容易一些。这一点我不否认。但这个例子只演示了画布元素所能实现的简单效果。下一篇文章我们就会介绍使用画布元素能够实现的高级效果，同样的效果若采用其他方式，恐怕就要困难多了。

原文作者：Matthew Casperson 原文链接: Game Development with JavaScript and the Canvas element

译文作者：李松峰 译文链接：http://www.cn-cuckoo.com/2011/08/10/game-development-with-javascript-and-the-canvas-element-2554.html

【编辑推荐】

  1. JavaScript入门之语言基础
  2. 云端JavaScript漫游指南（视频）
  3. 使用node.js进行服务器端JavaScript编程
  4. JavaScript实现页面滚动图片加载
  5. JavaScript入门之基本函数

分享名称：使用JavaScript和Canvas开发游戏之认识Canvas
URL地址：http://www.csdahua.cn/qtweb/news44/404844.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

搜索引擎优化知识

分类信息网站

成都户外广告牌设计　　 　南充电信机房托管　　 　研帮主　　 　四川网站建设　　 　成都品牌官网设计公司　　 　成都LED亮化工程　　 　小程序开发公司　　 　成都开元　　 　瑞杰管理　　 　小程序开发　　 　重庆托管服务器　　 　川银永信　　 　成都装饰装修　　 　安卓开发　　 　成都商城app开发　　 　成都网站推广公司　　 　网站空间　　 　微信小程序开发　　 　zzfdjwx.com　　 　广安园林景观设计