10 2016 档案
摘要：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0，那么会返回字符串“data:,”。 如果传入的类型非“image/png”，但是返回
阅读全文
摘要：【已知】canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。 【想要的】往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，
阅读全文
摘要：8 位无符号整数值的类型化数组。内容将初始化为 0。如果无法分配请求数目的字节，则将引发异常。 语法 参数 uint8Array 必选。 Uint8Array 对象分配到的变量名称。 length 指定数组中元素的数目。 array 该数组中包含的数组（或类型化数组）。内容将初始化为给定数组或类型化
阅读全文
摘要：javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性，导致Base64基本中看不中用。当前html5标准正式化之际，Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截
阅读全文
摘要：定义和用法 font 属性设置或返回画布上文本内容的当前字体属性。 font 属性使用的语法与 CSS font 属性 相同。 属性值 normal italic oblique normal small-caps normal bold bolder lighter 100 200 300 400
阅读全文
摘要：常用:JS 获取浏览器窗口大小 详细:关于获取各种浏览器可见窗口大小: 在我本地测试当中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。 而在公司项目当中： Ope
阅读全文
摘要：摩尔斯电码定义了包括：英文字母A-Z（无大小写区分）十进制数字0-9，以及“？”“/”“（）”“－”“．”很适合英语的通信。至今仍有很多地方在使用。在业余无线电通信中，他是全世界运用统一的电码。下面列出的是基本码表： 摩尔斯电码 字母 字符 电码符号 字符 电码符号 A ．━ B ━ ．．． C ━
阅读全文
摘要：我们知道canvas画布可以很方便的js原生支持转为图片格式并下载，但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制，其实现原理大体是浏览器端收集SVG代码信息，并发送到到服务器端，由后端程序转换成图片格式后，以流的形式反射给浏览器端下载。 最近在项目中
阅读全文
摘要：(function(window,document){ var cs2d = function(selector,options){ return new cs2d.fn.init(selector,options); }; cs2d.fn = cs2d.prototype = { init : function(selector,opt...
阅读全文
摘要：一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库，它模仿了ActionScript的语法，用于html5的开发，目前实现的功能相对较少，还不能称之为引擎，希望将来可以作为html5的开源引擎，为html5开发者提供服务。二，LegendForHt
阅读全文
摘要：第九篇，仿URLLoader读取文件 先看看最后的代码 基本上已经实现了Actionscript的模仿了。 效果和代码看这里,看不到效果的请下载支持HTML5的浏览器 http://fsanguo.comoj.com/html5/jstoas09/index.html 下面说说实现过程其实JavaS
阅读全文
摘要：用仿ActionScript的语法来编写html5系列开发到现在，应该可以做出一些东西了，下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 http://fsanguo.comoj.com/html5/jstoas07/index.html 2
阅读全文
摘要：第七篇，自定义按钮这次弄个简单点的，自定义按钮。其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。下面是添加按钮的代码， 原理：建立一个继承自LSprite的LButton类，给按钮设定两个图片，然后侦听鼠标位置，当鼠标移动到按钮上的时候，变换按钮状态，就是一个简单的按钮
阅读全文
摘要：一，对比1,html5中首先看看在html5的canvas中的文字显示 在html中输入框就不用说了，需要用到input标签 2,在as中 二,编写js类库后的代码 三,实现方法文字显示非常简单，只需要建立一个LTextField类和一个show方法就可以了function LTextField()
阅读全文
摘要：用仿ActionScript的语法来编写html5——第五篇，Graphics绘图 canvas本身就是一个Graphics，可以直接进行绘图在actionscript里面，每个Sprite都有一个Graphics，Shape我先不考虑了，它更容易实现些，在Html5中，绘图都是绘在同一个canva
阅读全文
摘要：第四篇，继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 应该还算可以吧？看一下成果吧,看不到效果的请下载支持html5的浏览器http://fsanguo.comoj.com/html5/jstoas03/index.html 下面说一
阅读全文
摘要：第三篇，鼠标事件与游戏人物移动 一，假设假设，所有可添加鼠标事件的对象，都有一个mouseEvent方法，添加的鼠标事件同过这个mouseEvent来调用。这样的话，添加鼠标事件，其实只需要给canvas添加一个鼠标事件，然后循环LGlobal类里的childList，即循环所有的可视对象，如果被添
阅读全文
摘要：上一篇，我已经模仿as，加入了LBitmap和LBitmapData类，并且用它们实现了静态图片的显示。这次用Sprite来动态显示图片。依然遵循上一篇对显示对象的处理的思路，添加LSprite类，并追加show方法，如下： 因为Sprite上可以有图片等其他的可显示对象，所以我在其构造函数里，添加
阅读全文
摘要：第一篇，显示一张图片 一，代码对比 as代码： public var loader:Loader; public function loadimg():void{ loader = new Loader(); loader.contentLoaderInfo.addEventListener(Eve
阅读全文
摘要：了解localStorage localStorage是最新的HTML5中的新技术，它主要是用于本地储存。最近看了看localStorage，发现比cookie好多用了，还比cookie简单多了。于是我到这里来和大家分享一下。 一、介绍 本地储存这东西历史可长了，先是从cookie开始，中途还有什么
阅读全文
摘要：一，说在前面的话 大概在半年前，看见一到信息竞赛题：在任意方格阵中设置障碍物，确定起始点后，求这两点之间路径。当时觉得蛮有意思的，但是没有时间去做，今天花了两个小时来实现它。据说有一个更高级的寻路算法叫做a*, 那我就把我的算法叫做W*。 这个算法主要用于解迷宫和实现战棋游戏(SLG)的寻路。首先讲
阅读全文
摘要：今天我突发其想，想到可以用HTML5来仿照苹果操作系统做一个能在Web平台运行的iOS。 当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。 完工后的图片： 担心图片是被我PS后的同学可以直接进入下面的地址测试： http://www.cnblogs.com
阅读全文
摘要：lufy前辈写过《[代码艺术]17行代码的贪吃蛇小游戏》一文，忽悠了不少求知的兄弟进去阅读，阅读量当然是相当的大。今天我不仿也搞一个这样的教程，目地不在于忽悠人，而在于帮助他人。 先看demo效果图： 测试URL： http://www.cnblogs.com/yorhom/articles/315
阅读全文
摘要：经历了几个月的改进，终于发布1.0.0版了。虽然引擎依然存在漏洞，但是比起上次更新还是要好多了。在这里不得不感谢各位网友的大力支持。 首先为引擎做一个开场白吧，也好让大家了解一下它： lufylegendRPG是基于lufylegend的HTML5游戏引擎。使用它时，需要引入lufylegend.j
阅读全文
摘要：上一次，我们实现了对话类，今天就来做一个游戏中必不可少的——人物类。 当然，你完全是可以自己写一个人物类，但是为了方便起见，还是决定把人物类封装到这个引擎里。 为了使这个类更有意义，我还给人物类加了几个特效，在以下讲解中会提到。 以下是本系列文章的目录： 如何制作一款HTML5 RPG游戏引擎——第
阅读全文
摘要：今天我们来实现情景对话。这是一个重要的功能，没有它，游戏将变得索然无味。所以我们不得不来完成它。 但是要知道，使用对话可不是一件简单的事，因为它内部的东西很多，比如说人物头像，人物名称，对话内容。。。 因此我们只能通过数组+JSON来将对话信息装起来，然后根据信息作出不同的显示。接下来我便要向大家展
阅读全文
摘要：开言： 在RPG游戏中，如果有地图切换的地方，通常就会使用幕布效果。所谓的幕布其实就是将两个矩形合拢，直到把屏幕遮住，然后再展开直到两个矩形全部移出屏幕。 为了大家做游戏方便，于是我给这个引擎加了这么一个类。 本系列文章目录： 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现 http
阅读全文
摘要：开言： 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章，在那里面我学习了他的引擎以及了解了游戏脚本。自从看了那几篇文章，我便对游戏开发有了基本的认识。今天我也以零基础为视点，为大家讲述如何开发一款简单的游戏。希望大家看了这篇文章，能使你对理解游戏开发有帮助。 你可以先
阅读全文
摘要：今天我们来实现烟雨+飞雪效果。首先来说，一款经典的RPG游戏难免需要加入天气的变化。那么为了使我们的RPG游戏引擎更完美，我们就只好慢慢地实现它。 本文为该系列文章的第二篇，如果想了解以前的文章可以看看下面列表： 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现 http://blog
阅读全文
摘要：一，话说天下大事 前不久看到lufy的博客上，有一位朋友想要一个RPG游戏引擎，出于兴趣准备动手做一做。由于我研究lufylegend有一段时间了，对它有一定的依赖性，因此就准备将这个引擎基于lufylegend。暂时命名为lufylegendRPG。毕竟基于lufylegend，如果名称中不加上l
阅读全文
摘要：本篇为《『HTML5挑战经典』是英雄就下100层-开源讲座》第二篇，需要用到开源引擎lufylegend，可以到这里下载： 下载地址：http://lufylegend.googlecode.com/files/lufylegend-1.7.1.rar API文档：http://lufylegend
阅读全文
摘要：是英雄就下100层是一款经典的手机小游戏，以前是在诺基亚手机上十分有名。今天我们就用HTML5和lufylegend一步步地实现它。 一，准备工作 首先，你需要下载lufylegend，下载地址如下： http://lufylegend.googlecode.com/files/lufylegend
阅读全文
摘要：最近我不仅对游戏开发感兴趣，还对函数图感兴趣，特此我开发了这个程序。以下是一些介绍和下载演示地址，喜欢的朋友可以看看： 一，产品名片 产品名：Function Graphics 版本： 0.1 开发者：Yorhom Wang 首次发行时间：2013年 4月4日 分类：教学程序 功能：画出一，二，三次
阅读全文
摘要：以前用JavaScript实现过令文本逐字输出的效果，今天我来用HTML5中的canvas实现一下。canvas里的内容可不像<p>那样好操作，首先，你需要懂得一些html5的API才能操作canvas，而<p>可以用DOM直接操作，相对而言，canvas还是要比<p>复杂些。那么本篇就为大家讲述如
阅读全文
摘要：一，小小开篇 首先不得不先介绍一下这个引擎： lufylegendRPG是lufylegend的拓展引擎，使用它时，需要引入lufylegend。同时您也需要了解lufylegend语法，这样才能更合理地运用lufylegendRPG。该引擎封装了lufylegend的一些功能，使该引擎能更快地开发
阅读全文
摘要：一，什么是TicTacToe（井字棋） 本游戏为在下用lufylegend开发的第二款小游戏。此游戏是大家想必大家小时候都玩过，因为玩它很简单，只需要一张草稿纸和一只笔就能开始游戏，所以广受儿童欢迎。可能我说了半天，对它名字不熟悉的朋友也不懂我在说神马。那没关系，我就引用Wiki（维基百科）的介绍作
阅读全文
摘要：一，准备工作 本次游戏开发需要用到lufylegend.js开源游戏引擎，版本我用的是1.5.2（现在最新的版本是1.6.0）。 引擎下载的位置：http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar 引擎API文档：http://lu
阅读全文
摘要：一，前言 本游戏是鄙人研究lufylegend数日之后，闲暇之余写下的。本游戏运用全新的技术HTML5写成的。游戏引擎为国产的lufylegend.js，大家可以去它的官网看看。游戏处于测试阶段，希望各位为游戏提点意见。另外游戏中的拼图是随即分配，保证游戏的随即性。 二，怎么玩？ 下载地址（含原码+
阅读全文
摘要：一、前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图，以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画，毕竟“动静结合”是先有动再有静。看了上一章的内容，或许你就有了对html5实现动画有了初步了解： html
阅读全文
摘要：一、哥，我被你吓住了 打架的时候会被块头大的吓住，学习的时候会被奇怪名字吓住（如“拉普拉斯不等式”）。这与情感化设计本质一致：界面设计好会让人觉得这个软件好用！ 所以，当看到上面“Matrix(矩阵)”的时候，难免会心生畏惧（即使你已经学过），正常心理。实际上，这玩意确实有点复杂。 然而，这却是屌丝
阅读全文
摘要：二、正文 设计师设计了一个图片上传圆环loading进度效果。如下截图： 首先，CSS3是可以实现的，以前写过一篇转大饼的文章：“CSS3实现鸡蛋饼饼状图loading等待转转转”。原理跟这个一模一样，两个半区的矩形，然后不同时机巧妙显隐实现。 但是呢，CSS3实现不太好理解，进度控制也不容易，最好
阅读全文
摘要：Javascript作为一种语言，有个美誉，开发者可以重新定义任何事情。虽然这在过去的一些javascript可以，但是ECMAScript5中已经开始得到改变，例如，我们可以使用Object.defineProperty创建一个不能被修改的对象的属性。本文中我们将讲述Object.definePr
阅读全文
摘要：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏
阅读全文
摘要：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled 这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由
阅读全文
摘要：在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才
阅读全文
摘要：这个库是为JavaScript中的大整数操作，如加，减，乘，除，mod，比较等。 这个库的原理是模拟笔和纸的操作，你可以操作整数，大到你的RAM允许。 例 APIs 1 .add(n) 添加n。 2 .sub(n) 减n。 3 .mul(n) 乘以n。 4 .div(n) 除以n。 5 .mod(n
阅读全文
摘要：Object.defineProperty 听说vuejs和avalon都是使用这种方式实现的。 Object.defineProperty最早是由IE8实现的，但是IE8的实现有许多问题而且不能hack。。。所以vuejs才支持IE9+，avalon才使用VBScript这个鬼。 我们可以在Obj
阅读全文
摘要：键盘按钮keyCode大全 字母和数字键的键码值(keyCode) 按键键码按键键码按键键码按键键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 78 W 87 5 53
阅读全文
摘要：在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。 基础概念 为了方便理解，我们需要了解几个基础概念，每个HTML元素
阅读全文
摘要：已知条件如下： 判断碰撞方法： 1.将矩形ABCD,上下左右4个方向均扩充R的长度,形成新的两个矩形，如果此两个矩形包含圆心坐标则发生碰撞. 2.如果条件1不成立,则仍然有机会发生碰撞,此时发生碰撞的可能存在于矩形ABCD的4个顶点处有可能碰撞, 此时检测根据圆和距离它最近的一个矩形顶点的点到点之间
阅读全文
摘要：一，原理介绍 这回有点复杂，不过看懂了还是很好理解的。当然，我不敢保证这种算法在任何情况下都会起效果，如果有同学测试时，发现出现错误，请及时联系我。 我们首先来建立一个以圆心为原点的坐标系： 然后要检测碰撞就只有两种情况了。 情况一，矩形全部都在一个象限内，如图： 当然，图中只是举个例子，不一定是只
阅读全文
摘要：点和矩形碰撞 矩形碰撞 点(x1,x2) ， 圆心(x2,y2) ，半径r 圆和圆
阅读全文
摘要：HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:(1) 你可以用CSS3的animattion+keyframes;(2) 你也可以用css3的transition;(3) 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;(4) 当
阅读全文
