<!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. webpack 处理CSS

    1.安装插件 npm i style-loader css-loader --save-dev npm i postcss-loader --save-dev npm i autoprefixer - ...

  2. java两种同步机制的实现 synchronized和reentrantlock

    java两种同步机制的实现 synchronized和reentrantlock 双11加保障过去一周,趁现在有空,写一点硬货,因为在进入阿里之后工作域的原因之前很多java知识点很少用,所以记录一下 ...

  3. 【Docker】拉取Oracle 11g镜像配置

    以下是基于阿里云服务器Centos 7操作 1.拉取Oracle11g镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_1 ...

  4. mysql 设置密码

    法一: 格式:mysqladmin -u用户名 -p旧密码 password 新密码 方法二:1.用root 进入mysql后mysql>set password =password('你的密码 ...

  5. Linux生成高强度密码

    在撰写,自动化脚本.往往需要添加账户及密码.如何自动化填写随机密码,有点意思.... 01.openssl生成密码 [root@mvp ~]# openssl rand -base 14Usage: ...

  6. [Spring MVC] - JSP + Freemarker视图解释器整合(转)

    Spring MVC中如果只使用JSP做视图,可以使用下面这段即可解决: <!-- 视图解释类 --> <bean class="org.springframework.w ...

  7. 原创：微信小程序调用PHP后台接口，解析纯html文本

    ---效果图片预览---    1.微信js动态传参:wx.request({        url: 'https://m.****.com/index.php/Home/Xiaoxxf/activ ...

  8. ios block常见的错误（二）——循环引用

    这篇博文继续block的常见错误——循环引用. 循环引用是很多初学者不能察觉的,其产生的原因,是block中的代码会对对象进行强引用. 读者请阅读示例代码1,并思考示例代码1所创建的对象能否被正常销毁 ...

  9. nyoj---快速查找素数

    快速查找素数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 现在给你一个正整数N,要你快速的找出在2.....N这些数里面所有的素数.   输入 给出一个正整数数N ...

  10. TortoiseSVN 清空已保存的用户信息

    http://blog.csdn.net/zb358983019/article/details/72898231.如果使用的是安装版的SVN,则打开系统开始菜单中Tortoise下的Settings ...