效果：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>knova绘制进度条</title>

    <style>

        body {

            padding: 0;

            margin: 0;

            background-color: #f0f0f0;

            overflow: hidden;

        }

    </style>

    <script type="text/javascript" src="konva.min.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 progressValueRect = new Konva.Rect({

        x: stage.getWidth() / 8,

        y: stage.getHeight() / 2,

        height: 40,

        width: stage.getWidth() / 8 * 3,

        fill: 'lightblue',

        cornerRadius: 5,

        lineCap: 'round'

    });

    layer.add(progressValueRect);

    var progressLine = new Konva.Rect({

        strokeWidth: 5,

        x: stage.getWidth() / 8,

        y: stage.getHeight() / 2,

        height: 40,

        width: stage.getWidth() / 8 * 6,

        stroke: '#d0d0d0',

        cornerRadius: 5,

        shadowBlur: 4,

        shadowColor: '#f0f0f0',

        shadowOffset: {x : 0, y : 0},

        shadowOpacity: 0.5

    });

    layer.add(progressLine);

    layer.draw();

    layer.draw();

    setInterval(function(){

        if(progressValueRect.width() < progressLine.width() ) {

            progressValueRect.width(progressValueRect.width() + 1);

            layer.batchDraw();

        }

    },20);

    var animate = new Konva.Animation(function(frame){

        var time = frame.time,        //动画执行的时间

            timeDiff = frame.timeDiff,    //上次动画执行到现在的时间

            frameRate = frame.frameRate;    //每秒中执行的帧数

    }, layer);

    animate.start();

</script>

</body>

</html>

knova绘制进度条的更多相关文章

  1. Unity3D中灵活绘制进度条

    有时我们需要在Unity3D中绘制进度条,如:           或        如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲.我搜到的大多数方法都是用NGUI插件,但有时只是 ...

  2. css绘制进度条，持续转动的进度条

    //只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...

  3. canvas绘制进度条（wepy）

    <template> <canvas canvas-id="canvas" style="width:{{width+10}}px;height:{{w ...

  4. jQuery ajax 标准写法及进度条绘制

    jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...

  5. Qt之模型/视图（自定义进度条）

    简述 在之前的章节中分享过关于QHeaderView表头排序.添加复选框等内容,相信大家模型/视图.自定义风格有了一定的了解,下面我们来分享一个更常用的内容-自定义进度条. 实现方式: 从QAbstr ...

  6. 用C#实现控制台进度条

    在写一些简单的控制台测试程序时,经常希望能够在程序运行的过程中实现进度条的功能以便查看程序运行的速度或者进度.本文以C#为例,实现简单的控制台进度条,以供大家参考(本文底部附下载地址). 1.实现效果 ...

  7. android113 自定义进度条

    MainActivity: package com.itheima.monitor; import android.os.Bundle; import android.app.Activity; im ...

  8. WTL 自绘 进度条Progressbar

    WTL 绘制的进度条,逻辑清晰明了,代码函数清晰易懂:基本思路就是 首先绘制 进度条背景图,然后根据动态进度不断重绘前景进度条,绘制操作在OnPaint函数里画.该类可以直接用于项目中. 使用示例: ...

  9. Unity3D NGUI制作进度条

    利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI  Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...

随机推荐

  1. jquery记录

    jquery validate验证框架 参考:http://www.cnblogs.com/linjiqin/p/3431835.html http://www.runoob.com/jquery/j ...

  2. linux下PHP7安装memcache

    1.memcache服务器的安装 .分别把memcached和libevent下载回来,放到 /tmp 目录下: # cd /tmp # wget http://www.danga.com/memca ...

  3. Markdown 手册

    前言(可以不看) 最开始只是想写一篇博文,准备使用markdown,感觉很流行(github.简书……很多都支持),而且渲染出来很好看,一直很想学,没有合适的机会,结果拖到了现在.比起什么python ...

  4. 信息增益(Information Gain)（转）

    当我们需要对一个随机事件的概率分布进行预测时,我们的预测应当满足全部已知的条件,而对未知的情况不要做任何主观假设.在这种情况下,概率分布最均匀,预测的风险最小.因为这时概率分布的信息熵最大,所以称之为 ...

  5. SpringMVC源码解析 - HandlerAdapter - HandlerMethodArgumentResolver

    HandlerMethodArgumentResolver主要负责执行handler前参数准备工作. 看个例子,红色部分的id初始化,填充值就是它干的活: @RequestMapping(value ...

  6. iOS7修改UISearchBar的Cancel按钮的颜色和文字

    两行代码搞定: [[UIBarButtonItem appearanceWhenContainedIn: [UISearchBar class], nil] setTintColor:[UIColor ...

  7. 关于SQLServer无法对数据库'XXX'执行删除，因为它正用于复制。错误：'3724' 的解决方案

    关于这个错误,是因为在服务器上想把数据库复制到本地,使用了“发布.订阅”方案,结果后来没成功,删除本地数据库的时候出现了这个错误,说“无法对数据库'XXX'执行删除,因为它正用于复制”. 解决方案:只 ...

  8. 洛谷P4312 [COCI 2009] OTOCI / 极地旅行社(link-cut-tree)

    题目描述 不久之前,Mirko建立了一个旅行社,名叫“极地之梦”.这家旅行社在北极附近购买了N座冰岛,并且提供观光服务. 当地最受欢迎的当然是帝企鹅了,这些小家伙经常成群结队的游走在各个冰岛之间.Mi ...

  9. SSO单点登录三种情况的实现方式详解(转载)

    单点登录(SSO——Single Sign On)对于我们来说已经不陌生了.对于大型系统来说使用单点登录可以减少用户很多的麻烦.就拿百度来说吧,百度下面有很多的子系统——百度经验.百度知道.百度文库等 ...

  10. [Erlang28]使用匿名函数灵活组合不同的case

    cowboy_http.erl里面的date1/2 启示: 以前一般写case里都是这样子: date1(Date) -> case month1(Date) of {error,badarg} ...