KineticJS教程(1-2)
2016-03-03 16:10
483 查看
1.基本结构
KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上,比如最常用的<div>标签。KineticJS在此容器中创建一个称之为舞台(stage)的结构,这个舞台由一个不可见的后台层和一个不可见的缓冲层组成,提供了高性能的路径和像素检测能力。舞台上再包含若干(至少一层)用户层(layer),每个层上又包含有若干canvas元素,比如各种图形、图像、元素组(组可以包含其他的图形和其他的组)等。用户还可以给这些层上的图形、元素组、层本身以及舞台本身添加事件监听方法,以响应鼠标、键盘等事件。浏览器最终显示的就是这些用户层的叠加效果。![](https://edi3og.bay.livefilestore.com/y1mP9PtgGcHg7eHdB3UGrOFxBtjZ1h59bA6x3mzNiUdI5h51A5y5ub5vIyLC7LrDHDOehVbF-g2v0UjQPHKGs2l5RYRZLEF1psaxJPw316un72a12Pi3K6uwg/how-it-works-cn.jpg?psid=1)
2.第一个画面
现在我们开始用Kinetic制作我们的第一个画面。Kinetic绘图的基本的流程可以如下图所示:
![](https://edi3og.bay.livefilestore.com/y1m5a3zwOjR8XHA_vNnDAu8WE5Ihc7uTBmR2bQbK9WB94rsYZ79O-3eQhWC1VU0DNcDDbEEET3NwUQXdxH73Vjr4W3dqoQLXNjkJHKDhzT_V_DDGF_qZAWIow/2-1.png?psid=1)
首先是创建一个HTML5页面,在<head>里添加对Kinetic库的引用:
<script src=“./kinetic.js”></script>
在<body>中添加一个用于绑定到Kinetic用于创建舞台的容器,比如说可以是个<div>:
<div id=“container”></div>
我们的Kinetic图像就将在这个容器中完成绘制。
在本例中,我们打算创建一个600×400的舞台,并在中心位置画一个红色矩形框。
同样是在<head>中添加脚本:
<script>
//在页面加载时进行绘图
window.onload = function() {
//创建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>
用浏览器打开页面就能看到如下的图像了:
![](https://edi3og.bay.livefilestore.com/y1mbCv12lXaUf2sTEXMHgi0XHMp9pwETfpC3ySokxQCY5fRuOB_9vv78tp8XtAM380fjRrP0dqLR9KfPQL9X-NsROKuUXvf2EiNjAJH4DLmw1sK17Q0RS8MEQ/2-2.png?psid=1)
相关文章推荐
- PDF在jsp页面中显示
- JavaScript第四天
- 【转向Javascript系列】深入理解Generators
- salesforce之json
- 谈谈Ext JS的组件——布局的用法
- 高性能动画!HTML5 Canvas JavaScript框架KineticJS
- javascript 严格模式
- JavaScript学习 九、事件
- js的event事件
- JS核心系列:浅谈 原型对象和原型链
- 解析Json
- Amaze js插件 选项卡竖置
- 模式窗体中调用父页面js与非模式化调用非父页面的js方法
- javascript else if
- JavaScript高级
- json 转 T
- JSP分页实现 代码
- javascript基本知识
- 为js数组扩展方法
- 枚举类转成json