一、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. Linux特殊字符含义

    文件名以 ' . ' 开头的都是隐藏文件或目录,只需要在文件或目录名前添加 ' . ' 就可以隐藏它 ~               表示主目录 .                当前目录 . .  ...

  2. [洛谷P5048][Ynoi2019模拟赛]Yuno loves sqrt technology III

    题目大意:有$n(n\leqslant5\times10^5)$个数,$m(m\leqslant5\times10^5)$个询问,每个询问问区间$[l,r]$中众数的出现次数 题解:分块,设块大小为$ ...

  3. [SCOI2007]组队 差分

    题面:[SCOI2007]组队 题解: 一开始固定H然后找性质找了很久也没有找到任何有用的东西...... 然后大佬告诉我一个神奇的方法... 首先我们化一波式子: 设$H$表示高度的最小值,$V$表 ...

  4. Unity游戏开发技术的最佳实践

    活动详情   作为全球规模最大的Unity开发者聚会,历年的Unite大会都成为开发者们获取Unity最新技术知识,交流开发经验,把握行业发展脉搏,体验全球前沿科技与高品质Made with Unit ...

  5. [bzoj] 3669 NOI2014 魔法森林　||　LCT

    原题 copy一篇题解:原链接 将边按照a排序,然后从小到大枚举,加入图中. 在图中用lct维护一棵两点之间b最大值尽量小的生成树. 当加入一条边(u, v)时: 如果(u, v)不连通,则直接加入这 ...

  6. ACE_Message_Block功能简介

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/30/607960.html ACE_Message_Block在Ace中用来表示消息的存放空间 ...

  7. Educational Codeforces Round 50 (Rated for Div. 2) C. Classy Numbers

    C. Classy Numbers 题目链接:https://codeforces.com/contest/1036/problem/C 题意: 给出n个询问,每个询问给出Li,Ri,问在这个闭区间中 ...

  8. 如何通过反射来创建对象？getConstructor()和getDeclaredConstructor()区别？

    1. 通过类对象调用newInstance()方法,适用于无参构造方法: 例如:String.class.newInstance() public class Solution { public st ...

  9. C# 中的委托和事件(详解)

    C# 中的委托和事件 委托和事件在 .NET Framework 中的应用非常广泛,然而,较好地理解委托和事件对很多接触 C# 时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太 ...

  10. [C#] 类型学习笔记二：详解对象之间的比较

    继上一篇对象类型后,这里我们一起探讨相等的判定. 相等判断有关的4个方法 CLR中,和相等有关系的方法有这么4种: (1) 最常见的 == 运算符 (2) Object的静态方法ReferenceEq ...