一、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. 【题解】CF#229 E-Gifts

    尽管是一道E题,但真心并不很难~不难发现,有一些物品是一定要被选择的,我们所需要决策的仅仅只有那几个有重复价值的物品. 而不同名字之间的概率并不互相影响,所以我们有 \(f[i][j]\) 表示名字为 ...

  2. 2018牛客多校第四场 J.Hash Function

    题意: 给出一个已知的哈希表.求字典序最小的插入序列,哈希表不合法则输出-1. 题解: 对于哈希表的每一个不为-1的数,假如他的位置是t,令s = a[t]%n.则这个数可以被插入当且仅当第s ~ t ...

  3. PE格式示意图

  4. CodeForces - 158B.Taxi (贪心)

    CodeForces - 158B.Taxi (贪心) 题意分析 首先对1234的个数分别统计,4人组的直接加上即可.然后让1和3成对处理,只有2种情况,第一种是1多,就让剩下的1和2组队处理,另外一 ...

  5. UVALive.3708 Graveyard (思维题)

    UVALive.3708 Graveyard (思维题) 题意分析 这标题真悲伤,墓地. 在周长为1e4的圆周上等距分布着n个雕塑,现在要加入进来m个雕塑,最终还要使得这n+m个雕塑等距,那么原来的n ...

  6. qt4+vs2010 环境搭建

    1.安装开发所需的软件: vs2010(包括VS2010SP1dvd1,Visual_Assist_X_10.9.2062.0_Crack等) QT: qt-win-opensource-4.8.5- ...

  7. DOM通过ID或NAME获取值

    DOM通过ID或NAME获取值 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  8. Leetcode 295. 数据流的中位数

    1.题目要求 中位数是有序列表中间的数.如果列表长度是偶数,中位数则是中间两个数的平均值. 例如, [2,3,4] 的中位数是 3 [2,3] 的中位数是 (2 + 3) / 2 = 2.5 设计一个 ...

  9. cssText基本使用及注意事项

    一.cssText之起步 那些年,我们是这样设置样式的: xxx.style.width = "233px"; xxx.style.position = "fixed&q ...

  10. 招人不是HR第一职责，留住人才是

    什么是HR的第一责任?我希望你们知道,招人不是你的第一职责,留住人才是你的第一职责.HR工作是相当难做的,你们是公司集团内里各个部门中最难做的部门,也是最具战略性的部门. 以人为本,这个“人”就是阿里 ...