一、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开发库封装的更多相关文章

  1. 学习笔记:Stage.js(又叫Cut.js)——2D canvas 开发库,游戏方面的

    http://piqnt.com/stage.js/ http://www.bootcdn.cn/stage.js/ Stage.js(可能又叫Cut.js)是一个2D HTML5 JavaScrip ...

  2. C 封装一个通用链表 和 一个简单字符串开发库

    引言 这里需要分享的是一个 简单字符串库和 链表的基库,代码也许用到特定技巧.有时候回想一下, 如果我读书的时候有人告诉我这些关于C开发的积淀, 那么会走的多直啊.刚参加工作的时候做桌面开发, 服务是 ...

  3. 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库

    推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...

  4. 使用libzplay库封装一个音频类

    装载请说明原地址,谢谢~~      前两天我已经封装好一个duilib中使用的webkit内核的浏览器控件和一个基于vlc的用于播放视频的视频控件,这两个控件可以分别用在放酷狗播放器的乐库功能和MV ...

  5. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  6. 跨平台的C++应用和UI开发库 QT

    跨平台的C++应用和UI开发库 QT 运行环境: 授权方式:BSD 软件大小:M 下载量:3912 更新日期:2012-04-05 来源地址: 联系作者:Linux     Qt是诺基亚开发的一个跨平 ...

  7. 分享一个嵌入式httpdserver开发库 - boahttpd library

    http://sourceforge.net/projects/boahttpd/ 一个C接口的开发库,适用于 windows/linux/或其它嵌入式平台,支持CGI扩展,支持多线程.採用面向对象开 ...

  8. 接口测试入门(5)----新框架重构,使用轻量级的HTTP开发库 Unirest

    之前的第一套框架在使用过程中发现存在以下问题: 一.  框架1缺点: 1.登陆的账号每个人写的不一样,一旦用户在测试环境被修改,则导致用例失败 2.每次读取访问网址,需要在同一个java文件下切换测试 ...

  9. 跨平台c开发库tbox:内存库使用详解

    TBOX是一个用c语言实现的跨平台开发库. 针对各个平台,封装了统一的接口,简化了各类开发过程中常用操作,使你在开发过程中,更加关注实际应用的开发,而不是把时间浪费在琐碎的接口兼容性上面,并且充分利用 ...

随机推荐

  1. Python使用requests模块下载图片

    MySQL中事先保存好爬取到的图片链接地址. 然后使用多线程把图片下载到本地. # coding: utf-8 import MySQLdb import requests import os imp ...

  2. BZOJ2588:Count on a tree——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2588 Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你 ...

  3. FreeRTOS ------ 栈、堆、任务栈

    1.任务的栈资源(创建任务分配的资源,单位是4字节)来自 configTOTAL_HEAP_SIZE 定义的堆,如果任务栈总量超过 configTOTAL_HEAP_SIZE,任务创建失败: 2.如果 ...

  4. BigBlueButton简介

    BigBlueButton是一套开源的视频会议系统,特别适用于远程教育但也可以用于标准的会议.该系统 可以让多个用户登录共享他们的摄像头并同时能够通过VOIP进行交流.可以在线演示PDF和Office ...

  5. Foxmail安装和登录

    Foxmail安装和登录... ============================== 下载Foxmail客户端:http://www.foxmail.com/ ================ ...

  6. [技巧篇]14.据说SSH框架需要的监听器,IntrospectorCleanupListener

    开发这么久,我也没有使用过IntrospectorCleanupListener监听器,今天偶尔看到一篇文章,虽然没有怎么读懂,也不太理解,但是好像给官方提供一些解释!给自己留一个备注,多点东西因为没 ...

  7. Android之简易音乐播发器

    布局主要代码之ListView: <span style="font-size:14px;"> <ListView android:id="@+id/m ...

  8. C语言数据库-二叉树

    一.定义 二叉树在图论中是这样定义的:二叉树是一个连通的无环图,并且每一个顶点的度不大于3.有根二叉树还要满足根结点的度不大于2.有了根结点之后,每个顶点定义了唯一的父结点,和最多2个子结点.然而,没 ...

  9. 【codevs】3196 黄金宝藏

    [算法]区间DP+博弈论 [题解]其实它都不是博弈题…… 很自然的可以设f[i][j]表示i~j先手可取得的最大价值. 容易得到转移式:f[i][j]=max(a[i]+sum[i+1~j]-f[i+ ...

  10. 大聊Python----SocketServer

    什么是SocketServer? SocketServer的最主要的作用是实现并发处理,也就是可以多个用户同时上传和下载文件. socketserver模块简化了编写网络服务器的任务. sockets ...