![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 84
有点发红
这个作者很懒,什么都没留下…
展开
-
HTML5 Canvas 视差滚动动画
下面是用HTML5的标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中,等到每一桢的图像绘制完全后在把整个缓冲Canvas原创 2011-10-16 16:42:03 · 8403 阅读 · 2 评论 -
HTML5 Canvas 视差滚动背景的OOP实现
在最开始的博文中,我用简单的方式实现了一个视差滚动动画的示例。在本文中将对它进行OOP重写,以便能使视差滚动背景动画加入到我的游戏框架之中。 重用的代码段: HTML: Your browser does not support the canvas element! JavaScript: Array.prototype.remove = function(obj) { for (原创 2011-11-17 10:08:29 · 5665 阅读 · 0 评论 -
HTML5 Canvas 基于OO的动画实例
前面我写过一个视差滚动动画的小例子,代码跟我一如既往写的JavaScript代码一样是面向过程的。 最近在学习面向对象的JavaScript,结合之前看过的一个HTML5动画的实例,感觉在做动画,特别游戏的动画效果上面向过程不是特别好用。 以下这个Canvas动画实例基于面向对象的JavaScript实现,其结构和扩展性觉得都较好。 HTML代码: Your browser doe原创 2011-11-03 18:24:41 · 4017 阅读 · 0 评论 -
HTML5 Canvas 碰撞检测的简单实现
本示例中演示的是模拟声纳探测的动画。在黑色的背景中画了两个黑色的障碍物,通过鼠标点击发出的声波可以将其检测出来:声波碰撞到障碍物之后,障碍物将向外发出声波。 代码如下: HTML代码: Your browser does not support the canvas element! JavaScript代码: 对JS内建对象Array的扩展,使其能删除数组中的某个特定对象原创 2011-11-10 14:24:34 · 12432 阅读 · 0 评论 -
HTML5 Canvas 竖版飞行射击游戏的实现
这个游戏本来是想做成东方那个的虐心弹幕游戏的。一是由于本人美工方面的问题,二是阿里云应用开发失败之后我也没有动力继续做下去了。 不过其本身已经是一个相对完整的游戏了,虽然怪物和弹幕类型都比较少,但是想打到很高的分数还是比较困难的。 效果截屏如下: 由于代码比较长,总共有800多行JS代码,而且分为了多个文件,所以我上传到了CSDN资源中,传送门如下: http://down原创 2011-12-19 15:10:43 · 4378 阅读 · 4 评论 -
HTML5 Canvas 逐帧动画的实现
和C++游戏开发相同,HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。 本示例中演示的是一个小人,默认状态下,小人朝右方站立;按下左/右方向键的时候,小人朝左/右方奔跑(在画布中没有位移);松开按键后保持奔跑的方向站立。 其中,向左或向右站立分别是一张6帧的图片,向左或向右奔跑分别是一张12帧的图片。 代码如下: HTML代码:原创 2011-11-15 16:37:28 · 18944 阅读 · 11 评论 -
HTML5 Canvas进阶(二):模式,组合,阴影,状态,变形
模式 前面在介绍strokeStyle和fillStyle属性的时候曾说过它们的取值可以是CSS颜色值、渐变对象或者模式对象。在上一篇中已经介绍过渐变对象了,那么这篇的开始就介绍模式对象。 模式对象可以通过Context对象调用createPattern()方法来生成,其原型如下: Object createPattern(image, patternType); 其中image可以是HT原创 2011-10-21 19:12:37 · 4289 阅读 · 0 评论 -
HTML5 Canvas 初步:字符串,路径,背景,图片
HTML5中新增了画布标签,通过它,可以使用JavaScript在网页中绘制图像。标签在网页中得到的是一个矩形空白区域,可以通过width和height属性来调整其宽和高。创建一个Canvas画布的方法如下: 可以在标签中添加标签不可用时的替代文本,如下所示: Your browserdoes not support the canvas element.原创 2011-10-14 15:17:31 · 31581 阅读 · 1 评论 -
HTML5 Canvas进阶(一):渐变,透明,移动,旋转,缩放
前一篇博文介绍了在标签中绘制图形的一些基本方法,本文将进一步介绍如何在标签中对图形图像进行操纵。 渐变 Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象,这两个方法的原型如下: Object createLinearGradient(x1, y1, x2, y2); 创建一个从(x1, y1)点到(x2原创 2011-10-21 14:33:38 · 25415 阅读 · 1 评论