<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         body {

             padding: 0;

             margin: 0;

             background-color: #f0f0f0;

             overflow: hidden;

         }

     </style>

     <script src="konva.js"></script>

 </head>

 <body>

     <div id="container">

     </div>

     <script>

         //创建舞台

         var stage=new Konva.Stage({

             container:'container',

             width:window.innerWidth,

             height:window.innerHeight

         });

         //创建层

         var layer=new Konva.Layer();

         stage.add(layer);

         //中心点坐标

         var cenX=stage.width()/2;//注意Konva获取数据都是用方法获取值

         var cenY=stage.height()/2;

         var x=1/8*stage.width();//矩形的坐标

         var y=cenY;

         var height = 1 / 12 * stage.height();

         var maxWidth =  3/4 * stage.width();

         //绘制一个进度条

         var innerRect=new Konva.Rect({

             x: x,

             y: y,

             width: 100,

             height: height,

             opacity: .7,

             fill: 'lightblue',

             cornerRadius: height / 2  // corner:角落

         })

         //把内部的矩形放到层里面去

         layer.add( innerRect );

         //创建外边框矩形

         var outerRect=new Konva.Rect({

             x: x,    //矩形的x的坐标

             y: y,    //矩形的y坐标

             width: maxWidth, // 矩形的宽度

             height: height,    // 矩形的高度

             stroke: 'blue', // 如果设置了stroke，那么就进行描边

             strokeWidth: 4, //描边的宽度

             // fill: 'green', // 如果设置了fill的样式，那么进行填充

             cornerRadius: height / 2 // 设置圆角的半径

         });

         layer.add(outerRect);

         layer.draw();

     </script>

 </body>

 </html>

使用Konva创建进度条的更多相关文章

  1. 利用面向对象思想封装Konva动态进度条

    1.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  3. 【css系列】创建网页加载进度条

    一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...

  4. Swift - 进度条（UIProgressView）的用法

    1,创建进度条 1 2 3 4 var progressView=UIProgressView(progressViewStyle:UIProgressViewStyle.Default) progr ...

  5. Android——ProgressDialog 进度条对话框

    public class ProgressDialogActivity extends Activity {    private Button btn_large_pd, btn_horizonta ...

  6. 关于JFace中的进度条对话框(ProgressMonitorDialog类)

    在Windows操作系统中,最常用的进度条对话框就是文件复制时的弹出框,如果想让用户愉快的使用你开发 的软件,那么在执行某个较长时间的操作时候,就应该弹出一个进度条提示框,告诉用户程序正在做什么. 做 ...

  7. 制作进度条(UISlider)

    怎样判断是否应当使用进度条 用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种. 可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可 ...

  8. spin.js无图片实现loading进度条,支持但非依赖jquery

    特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...

  9. 使用 new XMLHttpRequest() 制作下载文件进度条

    mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...

随机推荐

  1. jquery选中以什么开头的元素

    $("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择

  2. Windows 10 Pro_Ent Insider Preview x86 x64 10147中文版激活

    点击激活windows输入密钥:CC6JP-VN67C-8KCJ4-4V48V-HXM9B然后下载附件中的程序解压后运行注销即可激活企业版:在专业版基础上输入升级密钥:CKFK9-QNGF2-D34F ...

  3. 恭喜您成为2014年度Microsoft MVP!

  4. ORACLE检查死锁

    一.数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没有出现报错.二.死锁的原理当对于数据库某个表的某一列做更新或删除等操作,执行完毕后该条语句不提交,另一条对于这一列数据做更 ...

  5. Java典型应用彻查1000例：图形与网络游戏开发 PDF 扫描版[68M]

    <Java典型应用彻查1000例·图形与网络游戏开发>实例丰富,编排合理,可以让有初级Java基础的读者,从陌生到完全熟练地设计网络游戏,进而掌握3D立体绘图方法,适合作为Java网络游戏 ...

  6. linux 服务器删除大文件之后不释放存储空间的解决办法

    查看磁盘空间使用情况:df -h 查看根目录下,第一层目录所占空间情况:du -h --max-depth=1 / 找出根目录下大于2000M的文件:find / -size +2000M 找出已删除 ...

  7. Java API 各个包的内容解释

    java.applet 提供创建 applet 所必需的类和 applet 用来与其 applet 上下文通信的类. java.awt 包含用于创建用户界面和绘制图形图像的所有类. java.awt. ...

  8. HDUOJ---1233还是畅通工程

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  9. HDUOJ----(1016)Prime Ring Problem

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. html导出图片

    有一个神奇的库:html2canvas. 这个库简洁优美,使用方便. 下面先看一个小demo,它需要用到一张图片:haha.jpg. <html> <head> <scr ...