<!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. red5源代码编译并打包公布

    编译环境:ubuntu14.04/JDK7 步骤: 1.svn检出源代码(两种方式) svn co --depth empty https://github.com/Red5/red5-server ...

  2. code[VS] 1048 石子归并

    题目描写叙述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子.一次合并的代价为两堆石子的重量和w[i]+w[i+1]. 问安排如何的合并顺序, ...

  3. 【原创】浅析密码学在互联网支付中的应用|RSA,Hash,AES,DES,3DES,SHA1,SHA256,MD5,SSL,Private Key,Public Key

    一)概述 什么是互联网支付? 当支付遇到互联网,一场革命自然不可避免.成为现实的是传统的现金支付已经“退居二线”,各种在线支付方式成为人们日常消费的主要支付方式.银行推出的网银以及第三方支付公司推出的 ...

  4. 27、ArrayList和LinkedList的区别

    在Java的List类型集合中,ArrayList和LinkedList大概是最常用到的2个了,细看了一下它们的实现,发现区别还是很大的,这里简单的列一下个人比较关心的区别. 类声明 ArrayLis ...

  5. 我的硬盘安装ArchLinux+xorg+gnome+美化

    整个安装需要联接网络!现在的xorg为6.8.1,gnome为2.8.0                看了大家为了使用gnome,出现了那么多问题!这里我就推荐一个发行版,再安装上gnome2.8. ...

  6. JS操作frame框架

    1 框架编程概述 一个Html 页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一 个独立的Html 页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访 ...

  7. 搭建前端vue环境，安装vue-cli遇到Please try running this command again as root/Administrator的解决方案

    最近在搭前端环境,装完node.js之后,准备安装vue工程的初始化工具时(npm install -g vue-cli),遇到这个坑: 大体的意思就是权限问题,导致/usr/local/lib/no ...

  8. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

  9. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  10. 利用腾讯云免费证书打造全https站

    什么是https? 超文本传输安全协议(Hypertext Transfer Protocol Secure,缩写为HTTPS)是一种网络安全传输协议http是HTTP协议运行在TCP之上,所有传输的 ...