一、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. （三）Redis列表List操作

    List全部命令如下: lset key index value # 将列表key下标为index的元素的值设置为value,当 index 参数超出范围,或对一个空列表(key不存在)进行lset时 ...

  2. CentOS 不间断会话（ssh关闭后如何保证程序继续运行）（nohup和screen）

    当使用ssh与远程主机的会话被关闭时,在远程主机上运行的命令也随之被中断. 就是ssh 打开以后,bash等都是他的子程序,一旦ssh关闭,系统将所有相关进程杀掉!! 导致一旦ssh关闭,执行中的任务 ...

  3. spring+springMVC+mybatis较全

    1.基本概念   1.1.Spring   Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On- ...

  4. [Leetcode] minimum window substring 最小字符窗口

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  5. [POI2007] ZAP-Queries (莫比乌斯反演)

    [POI2007] ZAP-Queries 题目描述 Byteasar the Cryptographer works on breaking the code of BSA (Byteotian S ...

  6. c# string 转 GUID

    提供两种方法 1.try...catch... /* * string TO guid */ private static bool ToGuid(string str) { Guid gv = ne ...

  7. 2015/8/31 Python基础(5):字符串

    字符串是Python最常见的一种类型.通过在引号间包含字符的方式创建它.Python里单双引号的作用是一致的.Python的对象类型里不存在字符型,一般用单个字符的字符串来使用.Python的字符串是 ...

  8. [Luogu 2590] ZJOI2008 树的统计

    [Luogu 2590] ZJOI2008 树的统计 裸树剖不解释. 比板子还简单. #include <algorithm> #include <cstdio> #inclu ...

  9. Flume入门——Selector、Chanel等

    1.selector (http://blog.csdn.net/looklook5/article/details/40430965) (http://blog.csdn.net/xiao_jun_ ...

  10. Eclipse代码报错提示： the import java.util cannot be resolve,怎么解决？

    显示 the import java.util cannot be resolve,如何解决?我在使用eclipse的时候, 好像无意中更改了安装位置(workspace),现在所有的包都显示无法导入 ...