<!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. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. 打开Activity时，不自动显示(弹出)虚拟键盘

    打开Activity时,不自动显示(弹出)虚拟键盘 在AndroidManifest.xml文件中<activity>标签中添加属性 android:windowSoftInputMode ...

  3. PHP-数据库永久连接

    以下为PHP官网上对数据库永久连接做的解释: 永久的数据库连接是指在脚本结束运行时不关闭的连接.当收到一个永久连接的请求时.PHP 将检查是否已经存在一个(前面已经开启的)相同的永久连接.如果存在,将 ...

  4. Java I/O 应用程序设计

    课程  Java面向对象程序设计 一.实验目的 掌握数据流的使用 二.实验环境 1.微型计算机一台 2.WINDOWS操作系统,Java SDK,Eclipse开发环境 三.实验内容 1.使用Scan ...

  5. 苹果越狱后必备软件，总有你需要的！11月23日追加14个，支持【iOS4】

    http://bbs.dospy.com/thread-7398730-1-301-2.html越狱后必备软件,总有你需要的!11月23日追加14个,支持[iOS4]   背景自定义插件

  6. 解决错误This message can only be sent over HTTPS.

    在做基于Owin oauth客户端申请授权,调用如下代码: this.InitializeWebServerClient(); var userAuthorization = _webServerCl ...

  7. 重写 View 的 Touch 方法，实现一个酷炫的九宫格图片

    前几天翻看代码库,发现一个之前写过的一个有意思的小玩意,共享给大家

  8. URL 长度有限制吗？

    众所周知,传递小量参数(在没有其他原因,例如隐藏参数值的情况下)推荐使用GET方法,传递大量参数推荐使用POST方法.原因是什么呢? 原因是传说GET方法是通过URL来传递,而URL的长度是受限的,而 ...

  9. Linux卸载NAS磁盘，报device is busy

    # umount /data umount.nfs: /data: device is busy umount.nfs: /data: device is busy # fuser -m -v /da ...

  10. 下载url地址的图片

    // string url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=cNaaMfvhpb1vmcVRXRAdI ...