knova绘制进度条
效果：
源码：
<!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绘制进度条的更多相关文章
- Unity3D中灵活绘制进度条
有时我们需要在Unity3D中绘制进度条,如: 或 如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲.我搜到的大多数方法都是用NGUI插件,但有时只是 ...
- css绘制进度条，持续转动的进度条
//只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...
- canvas绘制进度条（wepy）
<template> <canvas canvas-id="canvas" style="width:{{width+10}}px;height:{{w ...
- jQuery ajax 标准写法及进度条绘制
jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...
- Qt之模型/视图（自定义进度条）
简述 在之前的章节中分享过关于QHeaderView表头排序.添加复选框等内容,相信大家模型/视图.自定义风格有了一定的了解,下面我们来分享一个更常用的内容-自定义进度条. 实现方式: 从QAbstr ...
- 用C#实现控制台进度条
在写一些简单的控制台测试程序时,经常希望能够在程序运行的过程中实现进度条的功能以便查看程序运行的速度或者进度.本文以C#为例,实现简单的控制台进度条,以供大家参考(本文底部附下载地址). 1.实现效果 ...
- android113 自定义进度条
MainActivity: package com.itheima.monitor; import android.os.Bundle; import android.app.Activity; im ...
- WTL 自绘 进度条Progressbar
WTL 绘制的进度条,逻辑清晰明了,代码函数清晰易懂:基本思路就是 首先绘制 进度条背景图,然后根据动态进度不断重绘前景进度条,绘制操作在OnPaint函数里画.该类可以直接用于项目中. 使用示例: ...
- Unity3D NGUI制作进度条
利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...
随机推荐
- android studio打包apk
转载:http://chenfeicqq.iteye.com/blog/1889160 1)Android Studio菜单Build->Generate Signed APK (2) ...
- MYISM表并发写请求过多 导致无法被读取解决方案
MyISAM锁调度是如何实现的呢,这也是一个很关键的问题.例如,当一个进程请求某个MyISAM表的读锁,同时另一个进程也请求同一表的写锁,此时MySQL将会如优先处理进程呢?通过研究表明,写进程将先获 ...
- Laravel 多态关联使用的案例
1.实现的功能,:短信发送,需要签名和模板审核,审核结果要插进审核记录表 2,在signature(签名表模型)和 template(模板表模型)添加多态对应关系代码其实一样,代码如下: 审核记录表需 ...
- 在 macOS 中激活 Astash Professional
Astah Professional v7.2.0-1ff236版安装完毕后,直接用压缩包内的 astah-pro.jar 替换原安装目录内的同名文件(/Applications/astah prof ...
- 如何用Python实现常见机器学习算法-1
最近在GitHub上学习了有关python实现常见机器学习算法 目录 一.线性回归 1.代价函数 2.梯度下降算法 3.均值归一化 4.最终运行结果 5.使用scikit-learn库中的线性模型实现 ...
- cmake 语法
语法说明 CMakeLists.txt 文件遵循一种简单的语法包括 注释,命令和空格字符.注释使用#符号,从符号开始之后的一行都表示注释.命令包括命令名,左括号,分隔参数的空白字符和右括号.命令既可以 ...
- 快速排序（Quicksort）的Javascript实现（转载）
日本程序员norahiko,写了一个排序算法的动画演示,非常有趣. 这个周末,我就用它当做教材,好好学习了一下各种排序算法. 排序算法(Sorting algorithm)是计算机科学最古老.最基本的 ...
- IOC容器基本原理
1 IoC容器的概念 IoC容器就是具有依赖注入功能的容器,IoC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IoC容器进行 ...
- vs2008快捷键极其技巧
vs2008快捷键极其技巧 1. 工具: Microsoft Visual Studio 2008 Version 9.0.21022.8 RTM Microsoft .NET Framework V ...
- Tempdb--查看tempdb使用的脚本
GO /****** Object: StoredProcedure [dbo].[usp_GetTempDBUsedSpace] Script Date: 03/05/2014 13:24:42 * ...