月度归档:2014年08月

用KineticJS设计图形,现在一本站banner为例

canvas源代码如下:

//设置舞台大小
 var stage=new Kinetic.Stage({
            width:611,
            height:193,
            container:container
        });
       //创建层
        var Slayer=new Kinetic.Layer();
       //创建矩形
        var bg=new Kinetic.Rect({
            x:0,
            y:0,
            width:stage.getWidth(),
            height:stage.getHeight(),
            fill:"rgba(20, 5, 63,1)"
        });
        //书写文字
        var title=new Kinetic.Text({
            x:20,
            y:100,
            text:"KineticJS中文社区",
            fill:"black",
            fontSize:42,
            fontFamily:"segoe UI ",
            fill:"white"
        });
        //我们的小标题
        var subTitle=new Kinetic.Text({
            x:20,
            y:150,
            text:"一起用最快捷的方式开发绚丽的Web图形",
            fill:"black",
            fontSize:20,
            fontFamily:"segoe UI",
            fill:"white"
        });
        //编组
        var Lgroup=new Kinetic.Group()
        //下面是画线并填充
        var Lred=new Kinetic.Line({
            points:[180,0,280,0,611,80,611,150],
            fill:"rgba(255, 28, 45,0.9)",
            closed:true
        });

        var Lgreen=new Kinetic.Line({
            points:[510,0,611,30,240,90],
            fill:"rgba(0, 255,50,0.6)",
            closed:true
        });

        var Lblue=new Kinetic.Line({
            points:[370,0,420,0,420,160,370,100],
            fill:"rgba(50, 100,205,0.6)",
            closed:true
        });

       //创建节点数
        Lgroup.add(Lred).add(Lgreen).add(Lblue);
        Slayer.add(bg).add(title).add(subTitle).add(Lgroup);
        stage.add(Slayer);

 

KineticJS的结构层次图解

KineticJS的主要层次有底层到顶层主要分为舞台、层、组、形状,他们都可以称为节点,其中一个舞台中可以包含多个层,一个层中可以包含多个组或形 状,一个组中可以包含多个形状。层与层之间是相互独立的不受干扰(比如一个层是运动的另一个层是静态的),组中的形状可以一起运动、拖放、旋转等。形状指 的是矩形、圆形、文字、多边形等。(图中的图形就是文中的形状)

KineticJS中圆Circle的使用方法详细说明

圆的绘制部分效果图:

<div id="container">Oops! Something Error!!</div>
    <script type="text/javascript" src="kinetic-v5.0.0.min.js"></script>
    <script type="text/javascript">
        //建立图片对象
        var imgObj=new Image();

        imgObj.onload=function(){
            var stage=new Kinetic.Stage({
                width:800,
                height:500,
                container:"container"
            });

            var layer=new  Kinetic.Layer();

            var circle=new Kinetic.Circle({
                //圆心位置
                x:300,
                y:200,
                //半径
                radius:180,
                //描边
                //stroke:"blue",
                //描边色红,绿,蓝
                strokeRed:100,
                strokeGreen:100,
                strokeBlue:250,
                //描边线宽
                strokeWidth:2,
                //虚线
                dash:[30],
                //填充
                fillEnabled:true,
                //填充颜色
                //fill:"skyblue",
                //填充颜色红,绿,蓝
                //fillRed:100,
                //fillGreen:150,
                //fillBlue:250,
                //填充线性渐变色
                //fillLinearGradientStartPoint:{x:-120,y:-120},
                //fillLinearGradientColorStops:[0,"blue",1,"red"],
                //fillLinearGradientEndPoint:{x:150,y:150},
                //填充径向渐变色
                //fillRadialGradientStartRadius:10,
                //fillRadialGradientColorStops:[0,"blue",1,"red"],
                //fillRadialGradientEndRadius:180
                //图案填充
                fillPatternImage:imgObj,
                fillPatternRepeat:"no-repeat",
                fillPatternOffset:{x:700,y:680},
                fillPatternScale:{x:0.26,y:0.26},
                //阴影
                shadowEnabled:true,
                shadowBlur:5,
                shadowColor:"black",
                shadowOpacity:0.4,
                shadowOffsetX:3,
                shadowOffsetY:3,
                //旋转
                rotationDeg:-10,
                //是否可见
                visible:true,
                //是否可监听事件
                listening:true,
                draggable:true,
                //绑定拖放限定X,Y
                dragBoundFunc:function(pos){
                    var Circlex;
                    if(620>pos.x&&pos.x>180){
                        Circlex=pos.x;
                    }else if(pos.x>620){
                        Circlex=620;
                    }else{
                        Circlex=180;
                    }
                    console.log(Circlex+":"+pos.x);
                    return{
                        x:Circlex,
                        y:this.getAbsolutePosition().y
                    }
                }
            });

            layer.add(circle);
            stage.add(layer);
        }
        imgObj.src="hxj.jpg";
    </script>

用KineticJS创建矩形的详细属性用法说明

<div id="container"></div>
    <script type="text/javascript" src="kinetic-v5.0.0.min.js"></script>
    <script type="text/javascript">
        //创建图片对象
        var opjIMG=new Image();
        opjIMG.onload=function(){
            //创建舞台
            var stage=new Kinetic.Stage({
                width:800,
                height:800,
                container:"container"
            });
            //创建层
            var layer=new Kinetic.Layer();
            //创建矩形
            var rect=new Kinetic.Rect({
                //设置矩形起始点坐标
                x:50,
                y:10,
                //矩形长宽
                width:400,
                height:400,
                //填充色
                //fill:"blue",
                //描边色
                stroke:"black",
                //描边宽
                strokeWidth:2,
                //圆角半径
                cornerRadius:10,
                //红绿蓝填充
                //fillRed:255,
                //fillGreen:205,
                //fillBlue:100,
                //阴影模糊
                shadowBlur:20,
                //阴影色
                shadowColor:"black",
                //阴影透明度
                shadowOpacity:0.5,
                //阴影X、Y偏移
                shadowOffsetX:1,
                shadowOffsetY:1,
                //描边虚线大小
                dash:[10],
                //是否可见
                visible:true,
                //是否可监听事件
                listening:true,
                //节点名
                name:"NAME",
                //X、Y缩放
                scaleX:1,
                scaleY:1,
                //旋转角度
                RotationDeg:0,
                //是否可拖放
                draggable:true,
                //渐变填充相关属性
                //fillLinearGradientStartPoint:{x:0,y:0},
                //fillLinearGradientEndPoint:{x:400,y:200},
                //fillLinearGradientColorStops:[0,"blue",1,"red"],
                //图片填充相关属性
                fillPatternImage:opjIMG,
                fillPatternOffset:{x:70,y:0},
                fillPatternScale:{x:0.3,y:0.3},
                //拖拽绑定函数,用于限定拖拽
                dragBoundFunc:function(pos){
                    return{
                        x:pos.x,
                        y:this.getAbsolutePosition().y
                    }
                }
            });
            //建立节点树
            layer.add(rect);
            stage.add(layer);

        }
        //添加图片
        opjIMG.src= "hxj.jpg";
    </script>

创建KineticJS常用的图形节点

绘制圆弧
var NAME=new Kinetic.Arc
绘制圆
var NAME=new Kinetic.Circle
绘制椭圆
var NAME=new Kinetic.Ellipse
建立组
var NAME=new Kinetic.Group
绘制图片
var NAME=new Kinetic.Image
绘制Label标签
var NAME=new Kinetic.Label
新建层
var NAME=new Kinetic.Layer
绘制线(直线、曲线)
var NAME=new Kinetic.Line
绘制路径
var NAME=new Kinetic.Path
绘制矩形
var NAME=new Kinetic.Rect
绘制正多边形
var NAME=new Kinetic.RegularPolygon
绘制圆环
var NAME=new Kinetic.Ring
绘制自定义形状
var NAME=new Kinetic.Shape
新建Sprite对象
var NAME=new Kinetic.Sprite
创建舞台
var NAME=new Kinetic.Stage
绘制星形图案
var NAME=new Kinetic.Star
绘制Tag标签
var NAME=new Kinetic.Tag
创建文字
var NAME=new Kinetic.Text
创建路径文本
var NAME=new Kinetic.TextPath
创建扇形
var NAME=new Kinetic.Wedge

主流HTML5游戏框架的分析和对比

本文主要选取了Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、 three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等进行了简要介绍和对比,主要是根据网上的资料整理 而成。

主流框架对比

 

Construct2

Construct 2是一个运行于Windows平台的游戏制作工具,它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台 (Windows、Mac、Linux、Android、iOS等)的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版(79英镑)和企业版 (259英镑),可以导出所有平台的版本,同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元,需要升级到企业版。
优点:
1. 简单易用,可实时运行游戏
2. 强大的事件系统,可以不通过写代码来控制游戏逻辑
3. 提供了可编程扩展的接口
4. 提供了大量特效,支持物理效果
5. 支持所有平台
6. 完整的文档以及社区支持
缺点:
不如直接写代码灵活
参考资料:

ImpactJS

ImpactJS是一个基于JavaScript的HTML5游戏引擎,同时支持PC和移动平台浏览器。它是目前除了Construct2之外最受欢迎的HTML5游戏引擎,使用需要支付99美元。优点:
1. 提供了灵活的关卡编辑器,可以快速构建游戏地图
2. 提供了强大的调试工具
3. 提供了Ejecta可以将JavaScript的执行结果通过OpenGL渲染出来,可以在iOS平台上获得与原生应用相近的效率
4. 文档齐全,有两本专门介绍ImpactJS开发的书
5. 支持物理效果
6. 支持自己编写插件来扩展

App Store游戏
1. Biolab Disaster
2. Drop JS

LimeJS

LimeJS是一个基于Google Closure Library开发的HTML5游戏框架,继承了Closure代码易读易懂、架构清楚的特性。同时提供了游戏中各种通用实体的封装,如 Director、Scene、Layer、Event和Animation等,与Cocos2d的API类似。它是由Digital Fruit公司创建。
优点:
1. 基于Apache协议的开源框架
2. 功能强大,文档齐全,与ImactJS类似
3. 支持物理效果
4. 与Cocos2d的API类似,容易上手缺点:
依赖于Google Closure

GameMaker

GameMaker与Construct 2类似,都是一个游戏制作工具,可以导出到各个平台运行,分为免费版、标准版(49.99美元)、专业版(99.99美元)和大师版(799.99美 元)。其中免费版只能导出Mac和Windows版本,导出HTML5需要大师版或者专业版(再额外支付99.99美元)。
优点和缺点:
优势与Construct2类似,但性价比不如Construct2高

CreateJS(EaselJS)

CreateJS是Adobe官方赞助的开源开发框架,它大部分 API都是基于Flash原有的API来模仿实现的,并且官方提供了直接把Flash动画转成JS数据包的工具,调用起来很方便。CreateJS提供了 若干开发套件及工具,分别是:EaselJS(负责图形、事件、触控、滤镜等功能)、TweenJS(补间动画)、SoundJS(音频控制)、 PreloadJS(文件加载)和Zoë(生成图片精灵及动画数据)。优点:
1. Flash开发者很容易上手
2. 提供了Flash转html5的工具,可以将部分Flash代码进行转换再修改
3. 基于MIT协议的开源框架
4. 类库设计非常独立,包含不同的模块,可选择性使用

lycheeJS

lycheeJS是一个环境独立的JavaScript游戏引擎,可以在任何支持JavaScript的环境中运行。它的理念是做最快的JavaScript游戏引擎。优点:
1. 同时支持PC(Firefox、Chrome、Opera、Safari、IE)和移动平台(WebKit、Chrome、Firefox、Safari)的浏览器
2. 提供了CDN、WebSockets、SPDY、HTTP2.0以及游戏截图的支持
3. 提供了可以直接导出第三方(Facebook、AppStore、Google Play Store)资源包来发布
4. 基于MIT协议的开源框架

Crafty

Crafty是一个体积小、简单、轻量级的2D的HTML5游戏引擎,它提供了通过Canvas或DOM来绘制实体,提供了精灵Map以及SAT高级碰撞监测支持。它是由个人(Louis Stowasser)创建,同时由Github上的一些开发者共同开发。优点
1. 体积小
2. 轻量级引擎,不会受到框架的太多束缚
3. 同时支持PC和移动平台浏览器

three.js

Three.js是一个轻量级的JavaScript库,用于在浏览器上创建和显示3D图形。它可以同时使用Canvas、SVG或WebGL进行绘制。优点和缺点:
支持3D,但是不适合做2D游戏

melonJS

melonJS是melonJS团队对Javascript热情以及开发经验的结晶,是一个简单、免费、而且独立的类库。优点
1. 轻量级的2D引擎
2. 支持所有主流的PC和移动平台浏览器
3. 支持使用Tiled map editor来创建和编辑地图
4. 支持多声道音频
5. 基于MIT协议的开源框架

Turbulenz

Turbulenz是一个开源的HTML5游戏引擎,提供了可以 运行在Windows、MacOS、Linux上的SDK,允许开发人员创建高质量和硬件加速的2D、3D游戏。包括以下功能:异步资源加载、进行特效和 粒子渲染、支持物理效果、碰撞检测以及动画、3D音效支持、支持网络交互以及社交网络分享、场景和资源的管理。优点:
1. 功能强大,同时支持2D和3D
2. 基于MIT协议的开源引擎

Quintus

Quintus是一个容易上手、轻量级、且模块化的HTML5游戏引擎。它引用面向对象的思想来进行HTML5游戏开发,同时依赖于jQuery来提供事件处理机制和元素选取操作。缺点
1. 依赖于jQuery
2. 目前引擎仍处于初级阶段,还很不成熟

Cocos2d-html5

Cocos2d-html5是一款基于Cocos2d-x API的2D开源免费HTML5游戏引擎。它目前通过canvas进行渲染,将来会支持WebGL。它由国内Cocos2d-x核心团队主导开发和维护, 行业领袖、HTML5大力推动者Google为这个项目提供支持。同时,Zynga、Google等大公司的工程师也参与到它的设计工作中。优点:

1. 与Cocos2d的API类似,容易上手
2. 中文文档齐全,资料丰富
3. 基于MIT协议的开源引擎

各框架具体参数对比

1. 各HTML5游戏框架对比HTML5 Game Engines
2. List of JS Game Engines
3. 对于Crafty、Lime、Frozen、Melon、Impact、Quintus框架,可以在Breakouts上查看用这些引擎开发同一个游戏的效果以及代码风格。Breakouts中使用到的特性包括碰撞检测、精灵动画、音效、地图、场景切换、交互、文字渲染、移动平台支持。
4. 以上各引擎中,除了Construct2、ImpactJS、GameMaker是收费的之外,其他引擎都是免费并且开源的。对于开源引擎,我们可以从 Github上面的关注度了解到该引擎的流行程度,关注的人越多,遇到问题越容易解决。同时一般来说,项目开发者越多,版本更新越快;项目的进行时间越长 则越成熟。下面将对各开源引擎的开发者人数、项目启动时间、关注度进行对比。
Game Engine Github commits Github contributors Start time Github Star Github Fork
LimeJS 532 22 2011.1.19 1091 187
EaselJS 784 15 2011.1.23 2758 650
lycheeJS 4 1 2012.9.5 110 20
Crafty 1182 67 2010.11.5 993 225
three.js 6409 198 2010.3.23 12691 2816
melonJS 1287 15 2011.4.11 643 137
Turbulenz 736 12 2013.4.26(最近才开源) 1522 207
Quintus 118 11 2012.8.4 450 89
Cocos2d-html5 2706 39 2012.1.28 735 303

总结

以上各引擎中,Construct2、ImpactJS、 GameMaker三个是收费的,其中Construct2与GameMaker更像一个游戏开发工具,可以实现不用写一行代码来制作游戏,更适合于没有 编程基础的人使用。而ImpactJS作为一个高质量的框架,且易于扩展,虽然是收费的,但是物有所值。开源引擎中,three.js是最火的,但是仅限于开发3D游戏。其次是 CreateJS,由Adobe官方赞助且采用Flash类似的API以及模块化开发,是Flash开发者以及将Flash游戏转换成html5不可多得 的选择。Turbulenz虽然开源时间比较晚,但颇有后来者居上的趋势,由于其对2D和3D的同时支持,是同时开发2D和3D游戏的最佳选择。 LimeJS与Crafty相比的优势在于有一个公司进行维护,相比个人要更稳定,但是需要依赖于Google Closure,也使之成为一个重量级的框架。Crafty体积小、轻量级,更适合于小游戏的开发。Cocos2d-html5作为国产框架的一个优势在 于中文文档和教程多,且得到了Google的支持,但相比ImpactJS、CreateJS仍不够成熟。melonJS、Quintus、 lycheeJS的开发者和使用者都较少,相关文档和教程也相对少,还有待观察。

参考资料

如果大家觉得对自己有帮助的话,还希望能帮顶一下,谢谢:)
转载请注明出处,谢谢!

前端工程师必备技能汇总

项目起源

还记得@jayli 的这幅前端知识结构图么。

前端知识结构

(点击查看大图)

图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个github项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。

尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于DataV项目)。

前端开发知识结构

前端书籍推荐

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

JavaScript

版本控制工具

后端书籍推荐

Linux管理

Linux编程

C/C++

本文来源:https://github.com/JacksonTian/fks

【编辑推荐】

知名Html5 Canvas Javascript库对比

《我应该选哪个Canvas库?》译文(以下的“我”是指原作者):

我一直在找一个Html5 canvas库,可以让我创建可交互的、带动画的UI界面。我的要求是:

良好的文档,支持与维护,因为我想在以后的项目里还能重用它
可以轻松的创造复杂的图形对象(我的工程比较复杂,可不是一个简单的按钮那样的活儿),最好能支持分组和多层
能帮我处理用户交互
支持触摸设备
提供用于作动态图形的工具
我搜了一些适合的库,想和你分享我的搜索成果。在可用的库的名单后面,我调查了这些库:EaselJS,fabric.js,Paper.js,processing.js和Kinetic.js,希望能帮你做出你自己的选择。

我找到的库

这儿是一些迄今为止看起来还有人维护的Canvas库:

CAAT
EaselJS
Fabric.js
Gury
JcanvaScript
Kinetic.js
oCanvas
Paper.js
processing.js
这儿还有一些我没有研究过的库,因为他们没有架在Github上,或者看起来没人更新了:

cakejs
Doodle-js
CanvasToolkit
Mootools Canvas lib
在Github上的对比
库 关注 分支 问题
CAAT 336 42 17
EaselJS 1,440 203 90
fabric.js 1,059 101 38
gury 348 19 9
jCanvaScript 80 5 2
Kinetic.js 267 41 7
oCanvas 194 20 6
Paper.js 1,706 111 30
processing.js 1,276 206 N/A
最小体积对比
库 代码量 (kb)
CAAT 210
EaselJS 44
fabric.js 133
gury 11
Kinetic.js 53
oCanvas 18
不过jCanvaScript,Paper.js和processing.js在Github是没有压缩版

在Stackoverflow的比较
搜索词 标签 # 被标记的问题 # 搜索到的问题
CAAT N/A N/A 5
EaselJS easeljs 30 79
fabric.js fabricjs 43 78
jCanvaScript N/A N/A 6
Kinetic.js kineticjs 74 30
oCanvas N/A N/A 19
Paper.js paperjs 9 49
processing.js processing.js 117 289
gury库在stackoverflow上没找到,我用N/A标识了没找到的。

对文档,教程和其他资源的研究

在选择框架时,我更看重Github的比较。他能提供库的开发状态概览以及正在用这个库的社区。在我并不想变成某领域的专家时,我希望能依靠社区(解决问题)。

但是,StackOverflow(SO)太有用了,尤其在已经有人问了比较问题的时候,比如:Current state of Javascript canvas libraries

于是,我打算就文档,教程和其他资源,给出一个深入的评论。对比:EaselJS, fabric.js, Paper.js, processing.js 以及这个外来者:Kinetic.js,来做个选择。

摘要

EaselJS, fabric.js, Paper.js, processing.js可以看作是4个领头者,他们有很明确的庞大用户社区,也架设在Github上,文档完善,大量的引用(就是在SO上的问题,以及论坛),更好的是,根据SO上他们之前的问题,他们是有单元测试的。

Kinetic.js是个后来者,最近才上线Github,还有很多变数,但受到了kangax的(Fabric.js的作者)热烈欢迎。

这4个库都有Github地址,都基于MIT许可发布。

EaselJS
这个库是CreateJS 套件的一部分,是一个全功能的用来创建先进html5交互与动画图形库。

特别的是,结合动画库(TweenJS),可以创建很复杂的动画!如果你打算开发游戏,你还可以用SoundJS库和资源预载入库(PreloadJS)搞定。

这个网站提供了一些漂亮的示例,源码可以和Github宝库上找到。

这个库看起来也能和其他库协同工作,比如Box2d和TexturePacker.

内置对触摸设备的支持

fabric.js
查看官网发现,此库貌似偏向建立“矢量图形编辑工具”。主要特色有:

创建和操作(移动,缩放,旋转…)矢量图形和文本对象
导入/导出成SVG或反过来
总结起来就是“一个在canvas上的可交互对象模型”。

如果你的目的是建立复杂场景,动态对象,在我看来他不是正确选择。

Paper.js
这个库是Scriptographer库的一部分。他有个特长是其Paperscript语言,基于一个提供了对点和图形精妙进行精妙数学操作的Javascript扩展——但是,他仍然没有文档。

这个库的强大在于,他在建立复杂矢量对象和管理鼠标交互上出类拔萃。然而,他没有实现对移动设备的支持,而且其动画能力貌似被 onFrame() 这个方法限制了——每秒被调用60次,也允许你改变canvas的内容。

processing.js
这个库的核心目标是建立可视化交互

这个库有个独特的历史——他是著名的Processing库的一个接口。我说著名,不是因为我自己知道,而是因为他在多媒体艺术社区非常知名,用来进行交互式艺术创造。

请看这第一个示例,看起来此库打算降低在canvas上创建交互式图形动画的学习曲线。他提供了易用的循环,和一个 draw() 方法,你可以简单的建立你的可视化交互。

我认为,因为其学习曲线低,对没有开发能力的艺术家们是完美的,但并不是建立面向对象组件的最佳工具。

Kinetic.js
Kinetic.js本是这次比较的门外汉,因为在他的Github上看起来,他离最多人使用的那个还很远。然而,如果搜索”canvas library”的话,他的html5教程是排在第一位的,而且,他在SO上也有很多不错的提问。

这个名字是个很好的线索,但这个库在处理大量对象的时候蛮快的,因为使用了多canvas技术。

他提供了很好的文档讲解和教程,包括系统的html5 canvas应用,详细的Kinetic.js和Three.js文档。他也提供了些好用的小提示——不是针对这个库的,有的是对于canvas。

结论

基于本篇评论,我认为我应该用EaselJS或Kinetic.js。Paper.js也不错但是不支持触摸设备,我敢肯定要集成这个功能并不复杂,但我更喜欢库中本来就有的。

最后,我决定用Kinetic.js,因为:

我觉得示例代码不错
作者本身写了一个优秀的系列教程
文档和例子都很清晰易懂
我要的库里都有了(我并不觉得在我做到20%的时候却需要引进另一个大库比如TweenJS来解决个小问题会让我高兴)
请不吝分享你的评论,或者我没提到的库,谢谢。

—————————————————-

译者的总结:

翻译完了觉得这文章有点像Kinetic.js的软广告。不过,上面的所有库功能都是非常强大的,日常应用毫无问题。Kinetic.js是综合来讲比较合理的一个——功能中等,体积中等。

个人觉得fabric.js最强大,体积也最大;Paper.js其次。

另外,在对比了国外的教程和我写的教程后,不知道我写的教程还有人看吗?——虽然,我也是完全原创的,但我的技术可比不上外国作者,唉

本文链接: [译]知名Html5 Canvas Javascript库对比.转载请保留.

rambo
我个人也在开发canvas库 不过当我看到 jCanvaScript 这个库的时候,我放弃了造轮子,因为我想要的语法格式什么的 跟他很相似. 语法很简单, 程序员可以很容易上手,他就是一个canvas方法的封装.只不过增加了事件 拖动机制. 压缩后也就 52k左右.
我一开始选择canvas 库的时候, 选择了 Raphaël kineticjs.
我个人认为 在初学的时候,可以选择jcanvasscript进行辅助了解canvas . 等学会了 有必要再去掌握别的时候,原理明白了 也就只有一些语法不同而已

sorry Raphaël 属于svg插件 疏忽了

HTML5安全:CORS(跨域资源共享)简介

         前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一 种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外 环境和发展的巨大差距)。

我之前《用HTML5实现人脸识别》这篇文章中提到了“Face.com实现了CORS(跨域资源共享)。CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用。这是一个伟大的功能,我希望更多的服务能够使用它。”在这篇文章介绍的实现方式里,我们可以自由的使用自己本域的JS代码通过Ajax来调用Face.comAPI,这是一种很美妙的方式,而在以前我们很难做到这一点。

由此我将引入和介绍CORS,希望对大家有所帮助。

定义

CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。

而W3C的官方文档目前还是工作草案,但是正在朝着W3C推荐的方向前进。

简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的。

以往的解决方案

以前要实现跨域访问,可以通过JSONP、Flash或者服务器中转的方式来实现,但是现在我们有了CORS。

CORS与JSONP相比,无疑更为先进、方便和可靠。

1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。

2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS(这部分会在后文浏览器支持部分介绍)。

详细内容

要使用CORS,我们需要了解前端和服务器端的使用方法。

1、  前端

以前我们使用Ajax,代码类似于如下的方式:

 

  1. var xhr = new XMLHttpRequest();
  2. xhr.open(“GET”, “/hfahe”, true);
  3. xhr.send();

 

这里的“/hfahe”是本域的相对路径。

如果我们要使用CORS,相关Ajax代码可能如下所示:

 

  1. var xhr = new XMLHttpRequest();
  2. xhr.open(“GET”, “http://blog.csdn.net/hfahe”, true);
  3. xhr.send();

 

请注意,代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址。

我们还必须提供浏览器回退功能检测和支持,避免浏览器不支持的情况。

  1. function createCORSRequest(method, url) {
  2.   var xhr = new XMLHttpRequest();
  3.   if (“withCredentials” in xhr) {
  4.     // 此时即支持CORS的情况
  5.     // 检查XMLHttpRequest对象是否有“withCredentials”属性
  6.     // “withCredentials”仅存在于XMLHTTPRequest2对象里
  7.     xhr.open(method, url, true);
  8.   } else if (typeof!= “undefined”) {
  9.     // 否则检查是否支持XDomainRequest,IE8和IE9支持
  10.     // XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式
  11.     xhr = new XDomainRequest();
  12.     xhr.open(method, url);
  13.   } else {
  14.     // 否则,浏览器不支持CORS
  15.     xhr = null;
  16.   }
  17.   return xhr;
  18. }
  19. var xhr = createCORSRequest(‘GET’, url);
  20. if (!xhr) {
  21.   throw new Error(‘CORS not supported’);
  22. }

现在如果直接使用上面的脚本进行请求,会看到浏览器里控制台的报错如下:

错误显示的很明显,这是因为我们还未设置Access-Control-Allow-Origin头。

2、  服务器

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

HTTP 头的设置方法有很多,http://enable-cors.org/这篇文章里对各种服务器和语言的设置都有详细的介绍,下面我们主要介绍Apache和PHP里的设置方法。

Apache:Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件 的<Directory>, <Location>, <Files>或<VirtualHost>的 配置里加入以下内容即可:

  1. Header set Access-Control-Allow-Origin *

PHP:只需要使用如下的代码设置即可。

  1. <?php
  2.  header(“Access-Control-Allow-Origin:*”);

以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。所以我们 应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有http://blog.csdn.net这个域才能跨域访问服务器的API。

  1. Access-Control-Allow-Origin: http://blog.csdn.net

浏览器支持情况


        上图为各浏览器对于CORS的支持情况(绿色为支持,数据来源:http://caniuse.com/cors),看起来相当乐观。主流浏览器都已基本提供对跨域资源共享的支持,所以,CORS才会在国外使用的如此普遍。

上文曾经提到,IE8和IE9在某种程度上可以通过XDomainRequest来提供同样功能的支持。

使用案例

目前国外支持CORS的平台有很多,例如:

 

Google APIClient Library for JS

Google CloudStorage

Face.com API

未来

从所有的浏览器都支持来看,CORS将成为未来跨域访问的标准解决方案。无论是自己服务器间的跨域访问,还是开放平台为第三方提供API,都将采用这 种统一的解决方案,因为它简单、高效,受到所有主流浏览器的支持。它非常重要,也会让我们的网络变得更加开放。

参考文章

IE10中的CORS forXHR

USING CORS

转载:来自蒋宇捷的博客(http://blog.csdn.net/hfahe/article/details/7730944

对json对象的增删查改操作

//下面是对json对象的增删查改操作

//声明json对象

var jsonObj2={persons:[{name:”jordan”,sex:”m”,age:”40″}, {name:”bryant”,sex:”m”,age:”28″}, {name:”McGrady”,sex:”m”,age:”27″} ]};

var persons=jsonObj2.persons; 
var str=””;

var person={name:”yaoMing”,sex:”m”,age:”26″}; 
//以下为json对象的操作,去掉注释可以查看操作结果 
//jsonObj2.persons.push(person);//数组最后加一条记录 
//jsonObj2.persons.pop();//删除最后一项 
//jsonObj2.persons.shift();//删除第一项 
jsonObj2.persons.unshift(person);//数组最前面加一条记录 只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作! //删除 
//jsonObj2.persons.splice(0,2);//开始位置,删除个数 
//替换不删除 
var self={name:”tom”,sex:”m”,age:”24″}; 
var brother={name:”Mike”,sex:”m”,age:”29″}; 
jsonObj2.persons.splice(1,0,self,brother,self);//开始位置,删除个数,插入对象 
//替换并删除 
//jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象

for(var i=0;i<persons.length;i++){ var cur_person=persons[i]; str+=cur_person.name+”‘sex is “+cur_person.sex+” and age is “+cur_person.age+”<br><br>”; } 
document.writeln(str); 
//转换为json文本 
var myjsonobj = JSON.stringify(jsonObj2); 
document.writeln(myjsonobj); 
</script>