我想跟代码谈谈

下面是用HTML5的标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中，等到每一桢的图像绘制完全后在把整个缓冲Canvas

在最开始的博文中，我用简单的方式实现了一个视差滚动动画的示例。在本文中将对它进行OOP重写，以便能使视差滚动背景动画加入到我的游戏框架之中。重用的代码段：HTML： Your browser does not support the canvas element!JavaScript：Array.prototype.remove = function(obj) { for (

前面我写过一个视差滚动动画的小例子，代码跟我一如既往写的JavaScript代码一样是面向过程的。最近在学习面向对象的JavaScript，结合之前看过的一个HTML5动画的实例，感觉在做动画，特别游戏的动画效果上面向过程不是特别好用。以下这个Canvas动画实例基于面向对象的JavaScript实现，其结构和扩展性觉得都较好。HTML代码： Your browser doe

本示例中演示的是模拟声纳探测的动画。在黑色的背景中画了两个黑色的障碍物，通过鼠标点击发出的声波可以将其检测出来：声波碰撞到障碍物之后，障碍物将向外发出声波。代码如下：HTML代码： Your browser does not support the canvas element!JavaScript代码：对JS内建对象Array的扩展，使其能删除数组中的某个特定对象

这个游戏本来是想做成东方那个的虐心弹幕游戏的。一是由于本人美工方面的问题，二是阿里云应用开发失败之后我也没有动力继续做下去了。不过其本身已经是一个相对完整的游戏了，虽然怪物和弹幕类型都比较少，但是想打到很高的分数还是比较困难的。效果截屏如下：由于代码比较长，总共有800多行JS代码，而且分为了多个文件，所以我上传到了优快云资源中，传送门如下：http://down

和C++游戏开发相同，HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。本示例中演示的是一个小人，默认状态下，小人朝右方站立；按下左/右方向键的时候，小人朝左/右方奔跑（在画布中没有位移）；松开按键后保持奔跑的方向站立。其中，向左或向右站立分别是一张6帧的图片，向左或向右奔跑分别是一张12帧的图片。代码如下：HTML代码：

模式前面在介绍strokeStyle和fillStyle属性的时候曾说过它们的取值可以是CSS颜色值、渐变对象或者模式对象。在上一篇中已经介绍过渐变对象了，那么这篇的开始就介绍模式对象。模式对象可以通过Context对象调用createPattern()方法来生成，其原型如下：Object createPattern(image, patternType);其中image可以是HT

HTML5中新增了画布标签，通过它，可以使用JavaScript在网页中绘制图像。标签在网页中得到的是一个矩形空白区域，可以通过width和height属性来调整其宽和高。创建一个Canvas画布的方法如下：可以在标签中添加标签不可用时的替代文本，如下所示： Your browserdoes not support the canvas element.

前一篇博文介绍了在标签中绘制图形的一些基本方法，本文将进一步介绍如何在标签中对图形图像进行操纵。渐变Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：Object createLinearGradient(x1, y1, x2, y2);创建一个从(x1, y1)点到(x2