#canvas-04-Konva ##4.1 基本概念

  • 舞台 Stage
  • 层 Layer
  • 组 Gourp

##4.2 基本形状 --查看API: https://konvajs.github.io/api/Konva.html

###1、矩形 Rect ###2、圆形 Circle ###3、扇形 Wedge ###4、文字 Text ###5、图片 Image ###6、线 Line ###7、多边形 Star ###8、..... ###9、例子：基本形状 1.html <head> <meta charset="UTF-8"> <title>konva</title> <style> body{ margin:0; } </style> </head> <body> <div id="box"></div>

      <script src="./konva.min.js"></script><script>// 创建舞台var stage = new Konva.Stage({width:window.innerWidth,height:window.innerHeight,container:"box"});// 创建层var layer = new Konva.Layer();// 将层添加到舞台中stage.add(layer);// 创建矩形var rect = new Konva.Rect({x:100,y:100,width:200,height:100,fill:"red",//圆角cornerRadius:10,stroke:"green",strokeWidth:10,// 是否可拖拽draggable:true, //true可拖拽的,false不可拖拽// 缩放scaleX:.8,     //水平缩放scaleY:.5     //垂直缩放});layer.add(rect);// 绘制圆形var circle = new Konva.Circle({//获取舞台的中心点x:stage.getWidth() / 2,y:stage.getHeight() / 2,//半径radius:100,fill:"yellow",stroke:"red"});layer.add(circle);// 绘制扇形var shanxing = new Konva.Wedge({x:500,y:500,radius:100,fill:"orange",stroke:"green",strokeWidth:10,// 角度angle:100});layer.add(shanxing);// 绘制线var line = new Konva.Line({points:[200,200,400,400],  //[x1,y1,x2,y2]strokeWidth:10,stroke:"#369",//虚线// dash:[50,10]   //长50隔10，然后一直循环dash:[50,10,30,5] //长50隔10，长30隔5，然后一直循环});layer.add(line);// 绘制五角星var star = new Konva.Star({x:700,y:200,// 内圆innerRadius:80,// 外圆outerRadius:160,fill:"red",// 几个角numPoints:2       //默认数字5});layer.add(star);// 绘制文字var text = new Konva.Text({x:50,y:500,text:"Hello word",stroke:"green",fontSize:49});layer.add(text);layer.draw();    //画层</script></body>

##4.3 事件 ###1、例子：鼠标事件 2.html <head> <meta charset="UTF-8"> <title>鼠标事件</title> <style> body{ margin:0; } </style> </head> <body> <div id="box"></div> <script src="./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 group = new Konva.Group();layer.add(group);// 绘制矩形var rect = new Konva.Rect({x:200,y:200,// 偏移，此时的坐标是（x-offsetX,y-offsetY）offsetX:100,    offsetY:100,width:200,height:200,fill:"yellow",stroke:"green",strokeWidth:8})group.add(rect);layer.draw();// 给矩形设置鼠标划入划出事件rect.on("mouseenter",function(){this.rotation(45);  //鼠标滑入让矩形旋转45度layer.draw(); //改变参数需要重新绘制层}).on("mouseleave",function(){this.rotation(0);layer.draw();})</script></body>

###2、Tween 过渡

###3、To动画

###4、例子：动画效果-过渡 3.html <head> <meta charset="UTF-8"> <title>tween 过渡</title> <style> body{ margin:0; } </style> </head> <body> <div id="box"></div> <script src="./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:100,y:100,width:10,height:20,fill:"red"});layer.add(rect);// 绘制星星var star = new Konva.Star({x:200,y:300,innerRadius:80,outerRadius:120,nomPoints:11,fill:"red"});layer.add(star);layer.draw()// 创建tween动画var tween = new Konva.Tween({node:rect,width:600,duration:3,yoyo:true,easing:Konva.Easings.EaseOut,  //先快后慢，先慢后快// 动画执行完毕onFinish:function(){console.log("啊，结束了");}});tween.play();// to动画 tween的简单用法star.to({rotation:360,  //旋转duration:1,     //过渡时间yoyo:true         //是否执行循环})</script></body>

###5、例子：动画效果-animation、定时 4.html <head> <meta charset="UTF-8"> <title>tween （动画、定时）</title> <style> body{ margin:0; } </style> </head> <body> <div id="box"></div>

      <script src="./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:200,y:300,innerRadius:80,outerRadius:120,numPoints:11,fill:"red"})layer.add(star);layer.draw();var angle = 10;var animate = new Konva.Animation(function(frame){star.rotation(angle);angle += 10;},layer);animate.start();// 定时// var angle = 10;// setInterval(function(){//   star.rotation(angle);//     angle += 10;// },layer);// animate.start();</script></body>

###6、例子：进度条(animation) 5.html <body> <div id="box"></div> <script src="./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 outerRect = new Konva.Rect({x:100,y:100,width:800,height:60,stroke:"green",strokeWidth:6})layer.add(outerRect);// 里面的矩形var innerRect = new Konva.Rect({x:100,y:100,width:0,height:60,fill:"pink"})layer.add(innerRect);layer.draw();var animate = new Konva.Animation(function(){if(innerRect.width() < 800){// 宽度重复加10innerRect.width(innerRect.width() + 10)}else{animate.stop();}},layer);animate.start();</script></body>

###7、例子：钟表 6.html <head> <meta charset="UTF-8"> <title>钟表</title> <style> body{ margin: 0; } </style> </head> <body> <div id="box"></div> <script src="./konva.min.js"></script> <script> // 定义宽高 var w = window.innerWidth, h = window.innerHeight;

           // 圆心坐标var x = w/2, y = h/2;// 表盘半径var radius = 200;// 创建舞台var stage = new Konva.Stage({container:"box",width:w,height:h})// 创建表盘的层var dialLayer = new Konva.Layer();stage.add(dialLayer);// 绘制表盘var circle = new Konva.Circle({x:x,y:y,radius:radius,strokeWidth:10,stroke:"#000"});dialLayer.add(circle);// 绘制刻度var hourDial = new dialSacle({x:x,y:y,outerRadius:radius,innerRadius:radius-20,strokeWidth:10,number:12});dialLayer.add(hourDial);//绘制分钟刻度var minuteDial = new dialSacle({x:x,y:y,outerRadius:radius,innerRadius:radius-10,strokeWidth:4,number:60});dialLayer.add(minuteDial);/* * 构造函数  绘制刻度* [@param](https://my.oschina.net/u/2303379) object options  配置选项*/function dialSacle(options){options = options || {},options.x = options.x || 0;options.y = options.y || 0;options.outerRadius = options.outerRadius || 0;options.innerRadius = options.innerRadius || 0;options.number = options.number || 0;options.strokeWidth = options.strokeWidth || 0;options.stroke = options.stroke || "#000";// 创建组var group = new Konva.Group({x:options.x,y:options.y});// 绘制刻度// 刻度间隔var angleDiff = 360 / options.number / 180 * Math.PI;for(var i = 0;i < options.number;i++){var line = new Konva.Line({points:[Math.cos(angleDiff * i) * options.outerRadius,Math.sin(angleDiff * i) * options.outerRadius,Math.cos(angleDiff * i) * options.innerRadius,Math.sin(angleDiff * i) * options.innerRadius],strokeWidth:options.strokeWidth,stroke:options.stroke});group.add(line)}return group;}dialLayer.draw();// 创建指针层var handLayer = new Konva.Layer({x:x,y:y});stage.add(handLayer);// 秒针var secondHand = new Konva.Line({points:[-20,0,180,0],stroke:"red",strokeWidth:2});handLayer.add(secondHand);//分针var minuteHand = new Konva.Line({points:[-20,0,150,0],stroke:"#000",strokeWidth:6});handLayer.add(minuteHand);//时针var hourHand = new Konva.Line({points:[-20,0,120, 0],stroke:"#000",strokeWidth:10});handLayer.add(hourHand);// 修饰的小圆var smallCircle = new Konva.Circle({x:0,y:y,radius:10,fill:"#000"});handLayer.add(smallCircle);// 定时function run(){//获取当前时间var date = new Date();//秒var seconds = date.getSeconds();secondHand.rotation(seconds/60 * 360 - 90);//分针var minutes = date.getMinutes() + seconds / 60;minuteHand.rotation(minutes/60 * 360 - 90);//小时var hours = date.getHours() % 12 + minutes / 60;hourHand.rotation(hours/12 *360 - 90);handLayer.draw(); //重新绘制setTimeout(run, 1000);}run();handLayer.draw();</script></body>

##4.4 Echarts表格插件 * 参考Echarts官网：http://echarts.baidu.com/index.html

##作业 ###1、炫酷效果 查看homework-answer ###2、动画的饼状图 查看homework-answer ###3、动画的直方图 查看homework-answer

转载于:https://my.oschina.net/u/3502365/blog/1154595

Canvas-04-Konva相关推荐

  1. H5画布 canvas（三）canvas 库 Konva.js 的使用

    目录 一.Konva 基本概念 二.Konva 的使用 1. 引入 Konva 2. Konva 基本绘制步骤 三.Konva 动画 1. tween 对象 2. 动画 to 方法的使用 3. 循环播 ...

  2. H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)

    目录 一.Konva 基本概念 二.Konva 的使用 1. 引入 Konva 2. Konva 基本绘制步骤 三.Konva 动画 1. tween 对象 2. 动画 to 方法的使用 3. 循环播 ...

  3. 第162天：canvas中Konva库的使用方法

    本篇接着上一篇:第157天:帆布知识基础详解  继续来写. 五,Konva的使用快速上手 5.1 Konva的整体理念 阶段 | + ------ + ------ + | | 图层 | | + -- ...

  4. HTML5之Canvas标签简要学习

    HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像.Canvas是一个矩形区域,使用Javascript可以控制其每一个像素.本文将对canvas标签 ...

  5. 将任意图像转成 HTML5 Canvas

    2019独角兽企业重金招聘Python工程师标准>>> 在开始讲解技术细节之前请先看这个演示程序,输入任意的图像URL,然后点击 Img2Canvas 按钮 BTW: 同样接受 da ...

  6. H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制

    目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...

  7. H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制

    目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...

  8. Android常用实用功能代码片大全

    转: http://www.it165.NET/pro/html/201504/38370.html?bsh_bid=950898232 一. 获取系统版本号: view sourceprint? 1 ...

  9. 基于Vue Konva的canvas图片放大缩小

    最近一个项目要实现图片根据鼠标位置多级放大缩小的功能,在网上找了好久的资源没有找到,偶然看到了一篇文章,但是没有完整的代码,研究了两天把代码补全了,其实也不难,但是困扰了我好几天,这个方法相对于网上别 ...

  10. canvas绘图库——Konva入门

    首先要区分几个概念 舞台 所有的画面都将在这个舞台展示 Konva.stage(container,width,height); 图层 每个图层都是一个canvas的dom层.在使用时需要将layer ...

最新文章

  1. php 词法分析,【PHP7源码学习】2019-03-20 PHP词法分析
  2. 9.3 Trains and Evaluates the MNIST network using a feed dictionary
  3. 数据库中什么是主键，什么是外键？
  4. Scala入门到精通——第二十二节 高级类型 （一）
  5. 计算机术语设备透明性,计算机中术语透明性是什么意思？
  6. Unity3D实践系列03,使用Visual Studio编写脚本与调试
  7. centos overlay 占用很大_盘锦技术好的升降货梯占用空间小
  8. 学习笔记之grub应用
  9. 【Vue2.0】—github小案例（二十三）
  10. 透视形变（perspective distortion）
  11. SoapUI WebService 接口测试
  12. java链接ev3_乐高机器人ev3 usb连接电脑方法lejos
  13. php劳务派遣系统,劳务派遣系统搭建
  14. check异常和uncheck异常的区别b
  15. linux上压缩pdf文件,如何压缩PDF文件？
  16. itext生成pdf间距_[itext]Java生成PDF文件
  17. Python3 猴子第一天摘下若干个桃子，当即吃了一半..
  18. 闪存文件系统（Flash File System）
  19. Zabbix 地址Ping检测告警
  20. python扫雷游戏设计_Python 扫雷游戏 完整源代码+图片素材

热门文章

  1. iOS 自定义下拉线条动画
  2. Vue打包部署到Tomcat
  3. 2022年贵州省施工员（土建）考试模拟练习题
  4. 他们凭什么赢？近看“2020大数据产业最具投资价值企业”
  5. Fundebug支持配置实时报警
  6. 使用python开发vue_使用Python2.7.13+django1.11.2+vue2.0开发的个人博客网站
  7. JAVA 分配发票问题
  8. 通信原理复习（七）——多路复用和多址技术
  9. Docker在Linux系统快速部署数据库大全
  10. mysql 语句解析_MySQL进阶之语句解析顺序