一、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. 协程-Greenlet

    协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时候,恢复先前保存的寄存器上下文和栈. 线程切换的时候会保存到CPU里面. 因此: 协程能保留上一次调用时的 ...

  2. 【Ubuntu】编写一个c语言代码

    安装 sudo apt-get  build-depgcc coding:http://www.cnblogs.com/zero1665/archive/2009/11/03/1595510.html ...

  3. BZOJ3224：普通平衡树——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3224 题面源于洛谷 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下 ...

  4. LOJ6388：[THUPC2018]赛艇——题解

    https://loj.ac/problem/6388 如果你做过BZOJ5217:[Lydsy2017省队十连测]航海舰队的话,那么恭喜你,这道题就是大水题. 如果你做过BZOJ4259:残缺的字符 ...

  5. UVA.540 Team Queue (队列)

    UVA.540 Team Queue (队列) 题意分析 有t个团队正在排队,每次来一个新人的时候,他可以插入到他最后一个队友的身后,如果没有他的队友,那么他只能插入到队伍的最后.题目中包含以下操作: ...

  6. 数据治理（Data Governance）

    今天看到一篇数据治理的论文,以下为论文内容的记录与学习. 数据治理是指将数据作为企业资产而展开的一系列的具体化工作,是对数据的全生命周期管理.数据治理的目标是提高数据质量(准确性和完整性),保证数据的 ...

  7. NOIP2016Day2T3愤怒的小鸟(状压dp) O(2^n*n^2)再优化

    看这范围都知道是状压吧... 题目大意就不说了嘿嘿嘿 网上流传的写法复杂度大都是O(2^n*n^2),这个复杂度虽然官方数据可以过,但是在洛谷上会TLE[百度搜出来前几个博客的代码交上去都TLE了], ...

  8. sublime Text 块编辑方法

    比如我们要把SQL语句中的多表查询结果封装成pojo SQL: SELECT a.id, a.title, a.sell_point, a.price, a.image, b.`name` categ ...

  9. MFC单文档多视图程序设计与Splitter拆分窗口

    1. 创建不同的子frame. 在文档视图程序中 CMainFrame(class CMainFrame : public CMDIFrameWndEx) 继承自 CMDIFrameWnd (CMDI ...

  10. FreeRTOS 问题归纳

    分配给FreeRTOS的heap过少,可能出现任务创建不成功:也可能调用vTaskStartScheduler()后有返回(也就是执行下一条程序),实质上也是vTaskStartScheduler() ...