Canvas开发库封装
一、Canvas第三方类库
1、常见的第三方类库
konva.js
<style>
body{
margin:0;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="../konva/konva.min.js"></script>
<script>
//创建舞台
var stage=new Konva.Stage({
container:"#box",
width:window.innerWidth,
height:window.innerHeight
});
//创建层
var layer=new Konva.Layer({ });
stage.add(layer);
//创建图形
var star=new Konva.Star({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
innerRadius:80,
outerRadius:200,
fill:"Red"
});
layer.add(star);
//绘制层
layer.draw();
</script>
chart.js 图表插件
eccharts 图表插件（百度）
tree.js(3d webgl 库)
二、第三方类库Konva
1、Konva的结构
舞台(stage)-->层(layer)-->图形
Statge -->Layer -->分组（-->分组-->）-->图形
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
2、Konva绘制图形
Konva.Rect
<script>
//创建舞台
var stage=new Konva.Stage({
container:"#box",
width:window.innerWidth,
height:window.innerHeight
});
//创建层
var layer=new Konva.Layer({
x:100,
y:100
});
stage.add(layer);
//创建一个组
var group=new Konva.Group({
x:100,
y:100
});
layer.add(group);
//创建矩形
var rect=new Konva.Rect({
x:0,
y:0,
width:100,
height:100,
stroke:"red"
});
group.add(rect);
layer.draw();
</script>
Konva.Circle
//绘制圆形
var circle=new Konva.Circle({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
radius:100,
stroke:"red",
fill:"green"
});
layer.add(circle);
Konva.Wedge
//绘制扇形
var wedge=new Konva.Wedge({
x:200,
y:400,
radius:100,
fill:"yellow",
stroke:"orange",
angle:90,
rotation:-10
});
layer.add(wedge);
Konva.Line
//绘制线条
var line1=new Konva.Line({
points:[700,100,900,200,800,400],
stroke:"skyblue",
strokeWidth:4,
lineCap:"round",
lineJoin:"round",
closed:true,
tension:true//曲线
});
layer.add(line1);
Konva.Star
Konva.Image
3、事件
点击正方形改变圆角最后变成圆
<div id="box"></div>
<script src="../konva/konva.min.js"></script>
<script>
//创建舞台
var stage=new Konva.Stage({
container:"#box",
width:window.innerWidth,
height:window.innerHeight
});
var layer=new Konva.Layer({
});
stage.add(layer);
var rect=new Konva.Rect({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
width:200,
height:200,
stroke:"#000",
strokeWidth:5,
fill:"yellow",
offset:{
x:100,
y:100
}
});
layer.add(rect);
layer.draw();
rect.on("click",function(ev){
rect.cornerRadius(rect.cornerRadius()+5);
rect.scale({
x:1.5,
y:1.5
})
layer.draw();
})
</script>
4、绘制
创建一个矩形： Konva.Rect(option);
//Konva使用的基本案例
//第一步：创建舞台
var stage = new Konva.Stage({
container: 'container', //需要存放舞台的Dom容器
width: window.innerWidth, //设置全屏
height: window.innerHeight
});
//第二步：创建层
var layer = new Konva.Layer(); //创建一个层
stage.add(layer); //把层添加到舞台
//第三步： 创建矩形
var rect = new Konva.Rect({ //创建一个矩形
x: 100, //矩形的x坐标，相对其父容器的坐标
y: 100,
width: 100, //矩形的宽度
height: 100, //矩形高度
fill: 'gold', //矩形填充的颜色
stroke: 'navy', //矩形描边的颜色
strokeWidth: 4, //填充宽度
opactity: .2, //矩形的透明度
scale: 1.2, //矩形的缩放 1：原来大小
rotation: 30, //旋转的角度，是deg不是弧度。
cornerRadius: 10, //圆角的大小（像素）
id: 'rect1', //id属性，类似dom的id属性
name: 'rect',
draggable: true //是否可以进行拖拽
});
//创建一个组
var group = new Konva.Group({
x: 40,
y: 40,
});
group.add( rect ); //把矩形添加到组中
//第四步： 把形状放到层中
layer.add( group ); //把组添加到层中
layer.draw(); //绘制层到舞台上
5、动画
01、Konva.Tween
<div id="box"></div>
<script src="../konva/konva.min.js"></script>
<script>
//创建舞台
var stage=new Konva.Stage({
container:"#box",
width:window.innerWidth,
height:window.innerHeight
});
var layer=new Konva.Layer({
});
stage.add(layer);
//绘制五星
var star=new Konva.Star({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
innerRadius:100,
outerRadius:200,
fill:"orange",
stroke:"red",
strokeWidth:6,
numPoints:6
});
layer.add(star);
layer.draw();
var tween=new Konva.Tween({
node:star,
duration:2,
rotation:360,
easing:Konva.Easings.Linear,
// yoyo:true
onFinish:function(){
tween.reset();
tween.play();
}
});
tween.play();
star.on("mouseenter",function(){
tween.pause();
}).on("mouseleave",function(){
tween.play();
})
</script>
- 1、tween的控制方法
- tween.play(), //播放动画
- tween.pause(), //暂停动画
- tween.reverse(), //动画逆播放
- tween.reset(), //重置动画
- tween.finish(), //立即结束动画
- seek：英文：寻找 英 [siːk] 美 [sik]
- 2、tween的缓动控制选项
- Konva.Easings.Linear //线性
- Konva.Easings.EaseIn //缓动，先慢后快
- Konva.Easings.EaseOut //先快后慢
- Konva.Easings.EaseInOut //两头慢，中间快
- Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
- Konva.Easings.BackEaseOut
- Konva.Easings.BackEaseInOut
- Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
- Konva.Easings.ElasticEaseOut
- Konva.Easings.ElasticEaseInOut
- Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回 英 [baʊns] 美 [baʊns]
- Konva.Easings.BounceEaseOut
- Konva.Easings.BounceEaseInOut
- Konva.Easings.StrongEaseIn //强力
- Konva.Easings.StrongEaseOut
- Konva.Easings.StrongEaseInOut
02、Konva.to
to就是对tween的封装，比较简单好用
heart.to({
scaleX:.5,
scaleY:.5,
duration:2,
yoyo:true
});
Canvas开发库封装的更多相关文章
- 学习笔记：Stage.js（又叫Cut.js）——2D canvas 开发库，游戏方面的
http://piqnt.com/stage.js/ http://www.bootcdn.cn/stage.js/ Stage.js(可能又叫Cut.js)是一个2D HTML5 JavaScrip ...
- C 封装一个通用链表 和 一个简单字符串开发库
引言 这里需要分享的是一个 简单字符串库和 链表的基库,代码也许用到特定技巧.有时候回想一下, 如果我读书的时候有人告诉我这些关于C开发的积淀, 那么会走的多直啊.刚参加工作的时候做桌面开发, 服务是 ...
- 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库
推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...
- 使用libzplay库封装一个音频类
装载请说明原地址,谢谢~~ 前两天我已经封装好一个duilib中使用的webkit内核的浏览器控件和一个基于vlc的用于播放视频的视频控件,这两个控件可以分别用在放酷狗播放器的乐库功能和MV ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- 跨平台的C++应用和UI开发库 QT
跨平台的C++应用和UI开发库 QT 运行环境: 授权方式:BSD 软件大小:M 下载量:3912 更新日期:2012-04-05 来源地址: 联系作者:Linux Qt是诺基亚开发的一个跨平 ...
- 分享一个嵌入式httpdserver开发库 - boahttpd library
http://sourceforge.net/projects/boahttpd/ 一个C接口的开发库,适用于 windows/linux/或其它嵌入式平台,支持CGI扩展,支持多线程.採用面向对象开 ...
- 接口测试入门（5）----新框架重构，使用轻量级的HTTP开发库 Unirest
之前的第一套框架在使用过程中发现存在以下问题: 一. 框架1缺点: 1.登陆的账号每个人写的不一样,一旦用户在测试环境被修改,则导致用例失败 2.每次读取访问网址,需要在同一个java文件下切换测试 ...
- 跨平台c开发库tbox：内存库使用详解
TBOX是一个用c语言实现的跨平台开发库. 针对各个平台,封装了统一的接口,简化了各类开发过程中常用操作,使你在开发过程中,更加关注实际应用的开发,而不是把时间浪费在琐碎的接口兼容性上面,并且充分利用 ...
随机推荐
- Python单例模式的四种方法
在这之前,先了解super()和__new__()方法 super()方法: 返回一个父类或兄弟类类型的代理对象,让你能够调用一些从继承过来的方法. 它有两个典型作用: a. 在单继承的类层次结构中, ...
- Android ListView 中加入CheckBox/RadioButton 选择状态保持、全选、反选实现
最近在一个项目中,需要在ListView的item中加入CheckBox,但是遇到的一个问题是上下滑动的时候如果有选择了的CheckBox,就会出现选择项错误的问题,下面将个人的解决方法总结如下;先说 ...
- POJ3621：Sightseeing Cows——题解
http://poj.org/problem?id=3621 全文翻译参自洛谷:https://www.luogu.org/problemnew/show/P2868 题目大意:一个有向图,每个点都有 ...
- POJ1523：SPF——题解
http://poj.org/problem?id=1523 这题明显就是求割点然后求割完之后的强连通分量的个数. 割点都会求,怎么求割完的分量个数呢? 我们可以通过万能的并查集啊!(具体做法看代码吧 ...
- BZOJ2693：JZPTAP——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2693 Description Input 一个正整数T表示数据组数 接下来T行 每行两个正整数 ...
- 20165218 2017-2018-1 《Java程序设计》第四周学习总结
20165218 2017-2018-1 <Java程序设计>第四周学习总结 教材学习内容总结 第五章 子类与继承 子类与父类 通过关键字extands定义子类 class 子类 exta ...
- bzoj2058: [Usaco2010 Nov]Cow Photographs(逆序对)
题目大意:给出n个数的序列,每次可以交换相邻的两个数,问把序列变成编号i在编号i+1左边,编号1在编号n右边(一个环)最少需要多少步.如:35421最少交换两次变为34512. 一开始看到这题,只会O ...
- The Usage of Pymongo
Install pymongo document install pymongo from the tar package download from website python setup.y i ...
- JavaScript身份证号码有效性验证
最近需要对身份证合法性进行验证,实名验证是不指望了,不过原来的验证规则太过简单,只是简单的验证了身份证长度,现在业务需要加强下身份证验证规则,网上找到了不少资料,不过都不合偶的心意,无奈只好直接写一个 ...
- BAT-Java必考面试题集
2018最新<BAT Java必考面试题集> 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象 ...