kineticjs_note概要1.doc

kineticjs笔记 Yunhaifeiwu 2014年3月14日 日期 版本 描述 作者 复核 2008-11-05 1.0 建立 初步建立文档结构 邓桂良 DGL008@126.com 目录： 某某系统设计说明书 1 1.1 目的 5 1.2 系统用户 5 1.3 参考资料 5 1.4 相关说明 6 1.5 公用界面要求 6 1.6 定义、首字母缩写词和缩略语 6 1.7 6 1.8 用例图 7 1.9 用例规约 7 1.9.1 用例一 7 简述 7 参与者 7 前置条件 7 业务处理流程 7 业务规则 7 界面原型 7 后置条件 7 补充说明 7 1.10 活动图 7 1.11 技术架构 8 1.12 系统功能 8 2 详细设计 9 2.1 系统关键类抽象 9 2.2 用例分析 9 2.2.1 分析类及其功能 9 用例一分析 9 Kineticjs 这是一个基于html5 canvas 的js 绘图API 含简单封装的动画api 最基本的对象之一是Node. 总的加载流程 舞台stage\层layer\图形对象\动画对象\启动 Layer的概念 类似 ps的层 Hello word Hello world 1 !DOCTYPE HTML html head style body { margin: 0px; padding: 0px; } /style /head body !--在body中添加一个用于绑定到Kinetic用于创建舞台的容器，比如说可以是个div： 我们的Kinetic图像就将在这个容器中完成绘制。 -- div id=container/div script src=kinetic-v5.1.0.min.js /script script defer=defer window.onload = function() { alert(ss); //创建Kinetic舞台，绑定我们添加的div容器 var stage = new Kinetic.Stage({ container : container, //div的id width : 600, //创建的舞台宽度 height : 400 //创建的舞台高度 }); //创建Kinetic用户层 var layer = new Kinetic.Layer(); //创建一个Kinetic矩形对象 var rect = new Kinetic.Rect({ x : 200, //矩形左上角x坐标 y : 150, //矩形左上角y坐标 width : 200, //矩形的宽度 height : 100, //矩形的高度 fill : red, //矩形的填充色 stroke : black, //矩形边缘线的颜色 strokeWidth : 4 //矩形边缘线的宽度 }); //向用户层中添加上面的矩形 layer.add(rect); //将上面的用户层添加到舞台上 stage.add(layer); stage.draw(); }; /script /body /html Hello world 2 !DOCTYPE HTML html head style body { margin: 0px; padding: 0px; } canvas { border: 1px solid #9C9898; } /style /head body div id=container/div script src=kinetic-v5.1.0.min.js/script