一、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:trueonFinish: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});

转载于:https://www.cnblogs.com/DCL1314/p/7875410.html

Canvas开发库封装相关推荐

  1. axios 跨域_当遇到跨域开发时，我们如何处理好前后端配置和请求库封装

    我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...

  2. CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...

    我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...

  3. 推荐18个基于 HTML5 Canvas 开发的图表库 - 梦想天空（山边小溪） - 博客园

    推荐18个基于 HTML5 Canvas 开发的图表库 - 梦想天空(山边小溪) - 博客园 推荐18个基于 HTML5 Canvas 开发的图表库

  4. 转贴： OpenGL开发库的组成

    OpenGL开发库的组成 开发基于OpenGL的应用程序,必须先了解OpenGL的库函数.它采用C语言风格,提供大量的函数来进行图形的处理和显示.OpenGL库函数的命名方式非常有规律.所有OpenG ...

  5. 【Android 高性能音频】高性能音频简介 ( 高性能音频问题引入 | 使用场景 | 相关开发库及技术 )

    文章目录 I 高性能音频使用场景 II 高性能音频开发库 III 相关开发资料 I 高性能音频使用场景 Android 手机的音频问题 : 1. 普通音频功能 : ① 常用音频开发方式 : 当前使用 ...

  6. C/C++ 类库开发库参考【资料整理】

    转自:http://bbs.chinaunix.net/thread-1858444-1-1.html 这里收集一些著名的 C/C++ 开发库.SDK.类库.可复用类与结构代码 等信息,列举它们的介绍 ...

  7. 云炬Android开发笔记 6启动图功能开发与封装

    阅读目录 1.启动图功能开发与封装(倒计时效果) 2. 持久化 3.倒计时工具库封装 4.第一个启动页面的倒计时 5.启动图功能开发与封装(轮播效果) 5.1 轮播图片的添加 5.2 指示器的添加 6 ...

  8. OpenGL开发库的详细介绍

    OpenGL开发库的组成 开发基于OpenGL的应用程序,必须先了解OpenGL的库函数.它采用C语言风格,提供大量的函数来进行图形的处理和显示.OpenGL库函数的命名方式非常有规律.所有OpenG ...

  9. Extjs 强大的WEB窗体开发库

    原文:Extjs 强大的WEB窗体开发库 作为一个javascript程序员,必须时刻关注JS的最新发展,想了解JS最新动态,可以关注我们的 Javascript教程网. 最近几年比较火的前端js框架 ...

最新文章

  1. Linux内存管理 (26)内存相关工具
  2. 解密蚂蚁金服MISA：37℃的自助语音交互是怎么做到的？
  3. DevExpress的进度条控件ProgressBarControl的使用-以ZedGraph添加曲线进度为例
  4. ubuntu15.10下code::blocks设置运行窗口为gnome命令行
  5. 如何创建Java程序
  6. bzoj 1731: [Usaco2005 dec]Layout 排队布局【差分约束】
  7. 多项式输出（洛谷-P1067）
  8. lstm原始论文_命名实体识别NER论文调研
  9. rename 命令批量修改后缀
  10. android其架构图,Android系统架构图，带你直观了解Android基本架构
  11. 参考文献的引用的格式
  12. Java中的三大特性 - 超详细篇
  13. 三层交换机/路由器OSPF配置详解【华为eNSP实验】
  14. 互联网版本（支持手机APP）云天售后服务软件上线
  15. 微型计算机外部设备接口,第五章 微型计算机输入输出接口
  16. 域内计算机本地管理员密码管理
  17. 对视频的分辨率大小进行裁剪
  18. android 获取手机号码 权限,Android跳转到通讯录获取用户名称和手机号码
  19. Direct3D 10
  20. 基于遗传算法求解TSP问题（旅游路径规划，Python实现，超详细，可视化，结果分析）

热门文章

  1. hbase 学习（十二）非mapreduce生成Hfile，然后导入hbase当中
  2. GDAL源码剖析（二）之编译说明
  3. ArcGIS API + Echarts 实现动态雷达图
  4. Unity编辑器定制和开发插件
  5. 【java学习之路】（javaWeb篇）007.正则表达式专题
  6. linux cc脚本,Linux运维知识之Linux简单处理CC攻击shell脚本
  7. oracle运维dba面试题,一份DBA面试题目---亲身经历
  8. oracle column的设置,SQL*PLUS的命令行——column命令 - [ORACLE]
  9. Docker 镜像基本命令操作
  10. Java复习总结（二）Java SE基础知识