html5
HTML5前端艺术01
这个作者很懒,什么都没留下…
展开
-
KineticJS学习笔记1
前言 : KineticJS是HTML5 canvas游戏开发的一个框架。其实和EaselJS有点像,说错了不是有点像,是很像。只要熟悉其中一种就够了,或者你可以自己开发一个类似的框架也行。废话不多说,开始今天的第一课吧:绘制一个Rectangle,顾名思义就是一个矩形。开始:首先先到KineticJS官网下载好源代码,并将其置于Rect目录下,你可选原创 2013-12-30 09:16:53 · 111 阅读 · 0 评论 -
KineticJS学习笔记16(插件篇)-绘制Text Path(文本路径)
不知道你们有没有上过PS课程,在大学时我曾经上过PS的公选课,虽然我经常缺席,但是最后考试成绩确实拿了个优秀,呵呵。现在还清晰的记得那次考试,老师叫我们在两个课时之内给我们学校设计一个校徽。校徽大家都熟悉吧。请看下图:设计校徽的时候就要用到Text Path这个技术,比如上面的这个校徽上面的英文字是绕着圆圈的轨迹排列的,这就是典型的Text Path。好的,回到原创 2014-01-03 11:13:21 · 108 阅读 · 0 评论 -
KineticJS学习笔记14(插件篇)-绘制Star(星星)
今天我们来绘制一个星星,要使用KineticJS绘制星星,可以使用Kinetic.Star()对象。main.js代码如下: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = n原创 2014-01-03 10:32:58 · 125 阅读 · 0 评论 -
KineticJS学习笔记15(插件篇)-绘制SVG Path(SVG路径)
SVG,大家都熟悉么?如果并不熟悉可以参考一下这里。简单地说SVG是一种矢量格式的图形(即放大不失真)。那SVG Path就是基于矢量的路径了,很好理解吧。在HTML5的canvas中导入SVG路径是很常见的,就是说我们可以使用现成的SVG数据导入到canvas中就可以显示出我们要的复杂图形,而不是自己定义图形,因为有些效果很难自己来定义。在KineticJS中,我们可以使用Kinetic.Pat原创 2014-01-03 10:49:42 · 162 阅读 · 0 评论 -
向jquery ztree添加新节点
Function(parentNode, newNodes, isSilent)zTreeObj.addNodesOverview[ depends on jquery.ztree.core js ]Add nodesIn order to avoid duplication data resulting from repeated initialization, zTre原创 2014-01-08 10:48:53 · 112 阅读 · 0 评论 -
创建一个jquery ztree的一般方法
Function(obj, zSetting, zNodes)$.fn.zTree.initOverview[ depends on jquery.ztree.core js ]The method which used to create zTree.1. The web page need to use W3C markup. For example: 2. Nee原创 2014-01-08 10:51:02 · 91 阅读 · 0 评论 -
获取select标签中已选中项的内容
例如,html:test1test2test3方法1:javasript那么我们可以这样获取选中项的value值:var e = document.getElementById("ddlViewBy");var strUser = e.options[e.selectedIndex].value;如果想获取其中的文本,则应该这样:var e = document.getE原创 2014-01-09 12:40:45 · 172 阅读 · 0 评论 -
使用shiny发送客户端数据到服务端
如果你是刚入门的web菜鸟,那么shiny很适合你。只要几行js代码即可完成从客户端到服务端数据的传输。shiny.onInputChange函数已经为你完成了这些事情。废话不多说,先实践一下。我将发送给服务端一个随机数,对应的服务端接收的对象为mData。先创建一个shiny接口文件(ui.R),如下:原创 2014-01-14 10:41:46 · 152 阅读 · 0 评论 -
Effectively detecting user input in JavaScript
Like I said in my introductory post, my inspiration to start blogging came from Stack Overflow. All too often, I see the same questions answered in the same way by different people and I think to mys转载 2014-01-15 11:14:08 · 81 阅读 · 0 评论 -
Interviewing as a Front-End Engineer in San Francisco
The following is a guest post byPhilip Walton (@philwalton). Philip recently went through a slew of interviews for front-end jobs at tech companies in the Bay Area and found them to be not what he转载 2014-01-15 17:26:32 · 210 阅读 · 0 评论 -
AJAX -onreadystatechange事件
在ajax中,当发送请求给服务器时,我们基于服务端的回应做一些动作,那该怎么办呢?我们知道当readyStage每次改变都会触发onreadystatechange事件,readyState包含了XMLRequest的staus属性。下面是XMLReauest对象的三个重要属性:属性描述onreadystatechange存储了一个函翻译 2014-01-16 16:56:27 · 113 阅读 · 0 评论 -
使用Ajax技术验证用户名是否存在
在注册系统的开发中,有事需要在用户输入完用户名,当输入框失去焦点时验证用户名是否存在。这个基本上在任何注册系统中都有这个特性。要想实现这个功能可以使用ajax技术,我们可以使用javascript原生的ajax,也可以使用其他框架提供的ajax(如大家熟悉的jquery),本篇文章我将介绍js原生的ajax技术。首先,在html中type如下代码: 用户名: 密码:原创 2014-01-17 09:28:01 · 167 阅读 · 0 评论 -
在chrome搜索结果中速快选择并打开
最近习惯了用键盘,不喜欢用鼠标了,所以一直在研究各种快捷键。其中有一个麻烦就是在chrome的搜索结果中如果要打开某个链接的话,还是需要用到鼠标,如果不用的话,你可以使用tab键来定位链接。问题是从第一个链接定位到一个所搜结果的话,起码要按十几次tab键,这给我造成很大的困扰。后来在http://superuser.com/questions/107524/keyboard-shortcu原创 2014-01-21 10:43:39 · 239 阅读 · 0 评论 -
substring,slice,substr(javascript)
string.substring(from, to)ArgumentsfromA nonnegative integer that specifies the position within string of the first character of the desired substring. 指定想要得到字符串的开始位置,即索引(非原创 2013-12-31 16:15:12 · 92 阅读 · 0 评论 -
获取页面元素的位置-getBoundingClientRect()
要想获取页面元素在页面中的具体位置可以使用document.documentElement.getBoundingClientRect定义:oRect=object.getBoundingClientRect();返回值:一个文本区域对象(TextTectangle),它就有四个属性:top,left,right,bottom,它们代表矩形的坐标,单位是像素。下图可以帮助我们理原创 2013-12-31 16:06:00 · 96 阅读 · 0 评论 -
(Web开发的编程习惯)coding Conventions in Web Development
今天我要讨论的是一些编程习惯。每个人编程时间长了都会遇到编写代码风格的统一问题。我觉得每个人都会遇到这样的问题,就是不同的工程可以使用不同的规则和风格来编写,并且有时会很遇到很多麻烦,以至于你想要一些统一的编写规范。换句话说,编程习惯就是某种特定语言推荐的编程风格,方法和实践。这些习惯一般包括注释,文件结构管理,缩进,声明,空格,命名习惯,编程习惯和原则等。我们建议你遵循这些规则,他将会帮助你提高翻译 2013-12-30 14:16:29 · 118 阅读 · 0 评论 -
KineticJS学习笔记2-绘制Circle
今天来绘制一个新的图形Circle(圆)。工程目录和笔记1中的是一样的,这里主要是main.js的实现不同。mian.js: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var laye原创 2013-12-30 10:19:35 · 100 阅读 · 0 评论 -
KineticJS学习笔记3-绘制Wedge(扇形)
使用KineticJS绘制一个扇形,可以使用一个Kinetic.wedge()对象。具体js代码如下:main.js: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer =原创 2013-12-30 10:37:15 · 105 阅读 · 0 评论 -
KineticJS学习笔记4-绘制Line(线段)
使用KineticJS创建一个line,可以使用kinetic.line()对象。主要代码main.js: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kin原创 2013-12-30 10:51:45 · 120 阅读 · 0 评论 -
KineticJS学习笔记5-绘制polygon(多边形)
使用KineticJS绘制一个多边形,可以使用kinetic.polygon()对象。具体代码如下:main.js:var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new原创 2013-12-30 11:01:20 · 124 阅读 · 0 评论 -
KineticJS学习笔记6-绘制image(图片)
使用KineticJS绘制图片可以使用kinetic.Image()这个对象。先上代码: var stage = new Kinetic.Stage({ container: 'container', width: 980, height: 360 }); var layer = new Kinetic.Layer()原创 2013-12-30 11:19:09 · 124 阅读 · 0 评论 -
KineticJS学习笔记7-绘制Sprite(动画精灵)
用kineticJS绘制一个精灵,可以使用kinetic.Sprite()对象。Sprite是游戏中实现动画的常用组件,但事先您德定义好动画帧。也就是SpriteSheet。这里我们使用官方的一个SpriteSheet精灵表单图片。原创 2013-12-30 11:28:39 · 198 阅读 · 0 评论 -
KineticJS学习笔记8-绘制Text(文本)
创建文本可以使用Kinetic.Text()对象。主要看看main.js中的内容: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 220 }); var layer = new Kinetic.Layer();原创 2013-12-30 12:40:34 · 172 阅读 · 0 评论 -
KineticJS学习笔记9-绘制Spline(贝塞尔曲线)
如果你觉得绘制笔直的线段不过瘾的话,你可以使用knetic.spline()对象绘制贝塞尔曲线。贝塞尔曲线通过一些点和弯曲扩张控制曲率来实现。下面先看看示例代码:main.js:var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 2原创 2013-12-30 12:54:31 · 278 阅读 · 0 评论 -
KineticJS学习笔记10-绘制Bolb(不规则椭圆形)
要想绘制不规则椭圆形可以使用kinetic.Bolb()对象。惯例先上代码: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer();原创 2013-12-30 13:03:37 · 110 阅读 · 0 评论 -
KineticJS学习笔记11-绘制Custom(自定义图形)
如果之前的所有图形都不能满足你的话,你可以尝试使用kinetic.shape()对象绘制自定义图形。当创建一个自定义形状时,我们需要定义一个绘制函数,他将会被传入Kinetic.Canvas渲染区域中。你可以使用HTML5的Canvas上下文,并使用指定的方法(如canvas.fillStroke())自动处理填充,描边便实现阴影。好的,下面同样看主要代码:main.js: var原创 2013-12-30 13:15:19 · 114 阅读 · 0 评论 -
KineticJS学习笔记12(插件篇)-绘制Label(标签)
为创建一个文本标签,我们可以使用Kinetic.Label()对象,这些标签是一些具有不同形状和背景的文本容器。下面是main.js代码:var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var la原创 2013-12-30 13:30:53 · 109 阅读 · 0 评论 -
KineticJS学习笔记13(插件篇)-绘制Regular Polygon(普通多边形)
我们可以使用Kinetic.Polygon()对象绘制普通多边形,如三角形,正方形,五边形和六边形等等。废话不多说,先看代码:main.js: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); va原创 2013-12-30 13:39:33 · 129 阅读 · 0 评论 -
一个HTML5+Easel.js游戏的例子
这是一个使用easeljs框架写的一个html5 RPG游戏,游戏很简单,主要是提供一个游戏的模板。下面是全部代码: body { background-color: #000; } var KEY原创 2013-12-30 13:59:44 · 140 阅读 · 0 评论 -
easel.js游戏(背景切换)
这是一个背景切换的例子:html: If you click on me, I will disappear. Click me away! Click me too! js: //va原创 2013-12-30 14:05:05 · 120 阅读 · 0 评论 -
正则表达式检测email地址是否合法
在注册系统开发中,需要检测用户输入的email地址是否合法,可以在js或者php中检测,但是差别不大,都可以使用正则表达式来检测。下面是js的一个例子:function validateEmail(email) { var re = /^(([^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1原创 2014-01-20 14:40:59 · 170 阅读 · 0 评论