<!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. H5实现的手机摇一摇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. ipa 打包遇到的坑

    1.xcode 打包 并上传至 appstore 审核 2.预留邮箱 收取 appstore 的审核结果 3.审核通过以后,通过 iTunes Connect 上传正式文件至 appstore     ...

  3. 〖Windows〗zigbee实验之cygwin编译TestSimpleMac出错的解决方法

    1. 错误代码如下: ... C51 COMPILER V8. - SN: K1CMC-IEYCYC COPYRIGHT KEIL ELEKTRONIK GmbH - *** ERROR C141 I ...

  4. Redis学习（7）-通用命令

    keys pattern: 获取所有与pattern匹配的key,返回所有与该key匹配的keys. 通配符: *表示任意一个或多个字符串. ?表示一个字符. 例如: 查询所有的key:keys * ...

  5. centos/rhel最小化安装图形化

    图形化,一般不再服务器中安装.为了提升系统的利用率. centos的yum源对应centos的源 RHEL的yum源对应RHEL的源 我演示的Centos6.5,我挂载的RHEL6.5的源.作为软件源 ...

  6. spring cloud单点登录

    概述 基于springcloud的单点登录服务及基于zuul的网关服务(解决了通过zuul转发到认证服务之后session丢失问题) 详细 代码下载:http://www.demodashi.com/ ...

  7. 关于PHP中的opcode

    简介 1.当Zend engine解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode),opcode是一个四元组,(opcode, ...

  8. Ant build xml中的各种变量解释

    Ant build.xml中的各种变量 Ant环境变量分为四种: 1.      build.properties文件中定义的变量 2.      build.xml文件中定义的变量, 3.      ...

  9. 用浏览器访问WCF

    在开发的时候,为客户端编写代码访问WCF的方式,我们应该比较熟悉,主要是添加一个代理,然后通过这个代理进行访问. 如果用浏览器访问WCF呢?(其实最终是想在JS里面访问)用浏览器访问.测试Web Se ...

  10. 常用JS技巧[转]

    作者:72妃 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); even ...