一、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. 控制Docker Compose的启动顺序的一个思路

    起源 守护进程daemon 从守护进程的角度看Docker Compose Docker的解决方案 思路 代码 结果 起源 Docker Compose提供了一个depends_on参数. https ...

  2. [Leetcode] single number ii 找单个数

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  3. The driver has not received any packets from the server

    解决方法: jdbc的url添加参数: jdbc.url=jdbc:mysql://localhost:3306/totosea?useUnicode=true&characterEncodi ...

  4. [POI2014]DOO-Around the world

    通过几年的努力,Byteasar最终拿到了飞行员驾驶证.为了庆祝这一事实,他打算买一架飞机并且绕Byteotia星球赤道飞行一圈.但不幸的是赤道非常长所以需要中途加几次油.现在已知赤道上面所有飞机场, ...

  5. Lua Go R HEXO Kotlin 简单介绍

    Lua Lua使用C编写而成的脚本语言.同为脚本语言的Python拥有庞大的类库工具包,定位于独立开发,Lua极度精简化,没有提供太多功能包,必须与C.C++等语言混合使用,目的是为了快速并动态的嵌入 ...

  6. STL之七：STL各种容器的使用时机详解

    转载于:http://blog.csdn.net/longshengguoji/article/details/8550235 C++标准程序库提供了各具特长的不同容器.现在的问题是:该如何选择最佳的 ...

  7. XSS攻击处理方案

    1. XSS攻击基本概念 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端脚本.攻击者利用XSS漏洞 ...

  8. idea 创建多模块时模块类无法引入

    我的原因是类的位置方的不对,由于刚搭建的项目,本来只想做个测试,就直接在java下创建类,然而这居然是个深坑,模块引入了也无法引入这个模块的类. 解决方法:创建com.***.***包后的类可以正常引 ...

  9. vue实现菜单权限控制

    大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种——前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这 ...

  10. LightOJ 1028 - Trailing Zeroes (I) 质因数分解/排列组合

    题意:10000组数据 问一个数n[1,1e12] 在k进制下有末尾0的k的个数. 思路:题意很明显,就是求n的因子个数,本来想直接预处理欧拉函数,然后拿它减n就行了.但注意是1e12次方法不可行.而 ...