Canvas 精度条 demo

zsh 2012-12-13

帮问答模块一哥们写demo

效果图如下：

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
html{height:100%;}
body{height:100%;}
#shoot{width:100%; height:100%; background:#FFC; text-align:center; line-height:60px;}
</style>
<script type="text/javascript">
var c;
var cxt;
var loadresult=-1;
var loadtext="Loading...";
var loadValue=0;
var temp=false;
function demo(){
c=document.getElementById("myCanvas");
cxt=c.getContext("2d");
cxt.lineWidth=1;
cxt.fillStyle="#666666";
cxt.strokeStyle="black";
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(100,100,28,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="black";
cxt.fillText(loadtext,77,100);
cxt.save();
}


function show()
{
demo();
}

function loadfun()
{

window.setInterval("changeText()",200)
	
}

function changeText()
{
cxt.clearRect(85,102,20,15);
loadValue+=1;
loadtext=loadValue+"%";
cxt.fillText(loadtext,90,112);

loadresult+=4;
cxt.beginPath();
cxt.strokeStyle = "black";
cxt.lineWidth = 20;
/**
 * context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
 * 画圆弧，可以是整个弧，也可以是一部分
 * @param: x 圆弧的中心坐标
 * @param: y 圆弧的中心坐标
 * @param: radius 圆弧的半径
 * @param: startAngle 圆弧的起始角度
 * @param: endAngle 圆弧的结束角度
 * @param: anticlockwise 是否为《逆》时针方向
 *
 * 其中角度是沿着x轴方向为0或360度，x轴的反向为180度
 * y轴的反向为90度，y轴方向为270度
 */
cxt.arc(100, 100, 38, (Math.PI / 180) * loadresult, (Math.PI / 180) * 360, true);
cxt.stroke();
cxt.closePath();


}

</script>
</head>
<body onLoad="show()">
<input type="button" value="Loading..." onClick="loadfun()"/>
<div id="shoot">
	<canvas id="myCanvas" width="1400px" height="800px">
		 抱歉！您的浏览器不支持html5的canvasAPI，请更换浏览器查看！
	</canvas>
</div>
</body>
</html>
zsh

zsh

相关推荐

类似微信聊天小程序-网易云信，IM DEMO小程序版本

云信IM DEMO 小程序版本 ，是一套使用网易云信IM端SDK，基于微信小程序原生开发方式开发的一款类似于微信的聊天小程序。小程序DEMO的推出，使得云信SDK的开发者们可以更便捷的借助微信渠道推广他们的产品。主要功能点如下：

sucheng / 0评论 2020-04-29

自用 方便写C语言demo的makefile

每次新增一个.c 文件的单独模块的 demo后，都要手动写 gcc file.c -o file -g 来编译新增的demo文件 ，比较麻烦。适合每个demo 单独一个.c 文件，写好源码后保存，在该目录打开 shell 只敲一句 make 就可以编译新增

choupiaoyi / 0评论 2020-01-23

springboot 详解 (四）redis &amp; filter

springboot 详解 （一） helloworld 下载demo. springboot 详解 (五）interceptor 下载demo

redis / 0评论 2016-11-17

promise与回调的异步编程比较（小demo）

https://blog.csdn.net/lijixuana/article/details/78654595

codable / 0评论 2018-12-21

spring boot之简单demo

添加spring boot 的父级依赖，这样当前的项目就是spring boot项目了，spring-boot-starter-parent是一个特殊的starter，它用来提供相关的Maven默认依赖

luojinbai / 0评论 2017-03-28

linux shell 根据目录拼出 java classpath

#ls /demo/lib/*.jar | xargs echo | sed 's/ /:/g'

雪糕 / 0评论 2011-03-28

spring cloud Demo

最近把自己对spring boot 2.0.RELEASE与 spring cloud 整理了一个demo上传到github有兴趣发小伙伴可以去了解一下

feinifi / 0评论 2018-06-26

springMVC的一个demo

首先到引入jar包 ，懒得分类，直接把下载的spring所有都copy进去了，自己查查各个jar包都是干嘛的。

lhhhoo / 0评论 2015-04-24

10款超炫HTML5游戏 附游戏源码

虽然和原版的切水果游戏相比功能不怎么完善，但是该HTML5切水果游戏也算有声有色，画面也十分华丽。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。HTML5真的

芋道源码 / 0评论 2015-11-25

WebGL实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这

hushhw / 0评论 2015-11-23

gwt-ext-demo

http://gwt-ext.com/demo/

kingwt / 0评论 2015-05-18

使用java操作MongoDB Demo

Mongo conn = null;DB db = null;conn = new Mongo("localhost", 27017);db = conn.getDB( "test" );e.printStackTr

mjperhuo / 0评论 2011-04-13

spring MVC demo

-- 处理器映射器，使用处理器名字作为URL -->

binggege / 0评论 2010-12-16

cxf spring，我的第一个DEMO

把cxf所有的包引进来就可以了。不需要另外引用spring的jar包。

haidaoxianzi / 0评论 2010-11-26

MyBatis And Spring Demo

-- 都写在spring配置文件中，这里只需要配置映射文件 -->

咻pur慢 / 0评论 2010-10-26

jquery easyui treegrid demo

<!<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">. <linkrel="stylesheet&qu

zhangmingming / 0评论 2013-07-11

上下跑马灯效果 按钮控制暂停 上下滚动

setTimeout;//5秒后执行yourFunction(),只执行一次

rou / 0评论 2013-05-29

Vue+websocket+stompjs 实时监控坐席状态demo

由于是前后端分离的demo, 程序的后端我不管，我只负责把前端做好，这只是个demo， 还有很多不完善的地方。2018-01-09新增：后端的MQ事件结构现在也改了，该demo只能看看了。case 'NotReady': return '未就绪';

安防监控ezhf / 0评论 2019-06-21

Lucene demo调试运行：

　JDK 1.5 TOMCAT 5.5 Eclipse 3.0.1解压lucene1.4.3把luceneweb.war复制到tomcat的webapps目录,重新启动tomcat，就可以看到目录下多了一个luceneweb目录新建一个index文件夹，位

qiuzhuoxian / 0评论 2012-09-01

Swing Application Framework + Swing Databinding 的Demo

其长度大约8分钟左右。

jiaming / 0评论 2007-05-07

[原] jQuery EasyUI 1.2.6源码 Demo合集 离线API

jQuery EasyUI 1.2.6 源码，demo合集，离线api，个性化的layout布局。

WSGPFMMY / 0评论 2012-07-09

jquery ajax demo

<input class=but1 value='接 收' type="button" action=recive openid=$openid

ajaxDreamer / 0评论 2011-08-18

Spket在eclipse中的设置(demo)

http://www.spket.com/demos/js.html

IBigPig / 0评论 2011-05-16

hadoop cascading demo

http://www.blogjava.net/Skynet/archive/2009/07/22/287807.html http://docs.cascading.org/impatient/

aliushuo / 0评论 2014-07-08

使用SlidingMenu开发demo

有这个actionBar和slidingMenu二个源码。使用demo的时候需要让其作为Lib.

wolfoxkao / 0评论 2013-05-06

Android 支持ListView,GridView以及ScrollView上拉下拉控件源码以及Demo

写道转载很好的demo

yangfangjit / 0评论 2013-04-08

DeepMind AlphaStar星际争霸2首秀：Demo很强大，但现场比赛输了

机器之心报道，参与：李泽南、李亚洲。两年前，DeepMind 曾宣布开始研究打即时战略游戏《星际争霸 2》的人工智能，今天，AlphaStar 终于首次亮相在世人眼前。在几场展示 AI 实力的 Replay 铺垫之后，AlphaStar 现场比赛却输了。两

allians / 0评论 2019-01-25

一场科技盛宴，一次“盈”满天下安创成长营五期Demo Day完美收官

2018年6月21日，安创成长营第五期Demo Day在北京金隅喜来登拉开帷幕，16家安创成长营五期成员代表齐齐亮相，为资本圈带来了一场集科技、创新、前瞻于一体的项目展示。数百数位业内有影响力的Arm生态系统的合作伙伴、知名品牌厂商创新事业部负责人，以及资

Raquant / 0评论 2018-06-22

Python浅复制中对象生存周期实例分析

本文实例讲述了Python浅复制中对象生存周期。分享给大家供大家参考，具体如下：。Python的浅复制以及深复制我了解的并不多，我不清楚shutil中的copy1和copy2是不是算是浅复制和深复制？这两个操作，一个是文件属性重建，还有一个是文件属性不变。

txlCandy / 0评论 2018-04-02

HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

本文实例讲述了HTML5游戏引擎LTweenLite实现的超帅动画效果。分享给大家供大家参考，具体如下：。lufylegend.js是一个开源的HTML5游戏引擎，在游戏中往往会有各种的动画，这些动画有些是flash文件，有些是视频文件，本次就来利用luf

pmaster / 0评论 2016-01-26

jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

#desktop ul { padding:0; border-bottom-style:none; width:5000px; list-style:none; }. #controller li { width:40px; float:left; pa

Clarence / 0评论 2016-01-29

jquery拖拽效果完整实例(附demo源码下载)

本文实例讲述了jquery实现的拖拽效果。分享给大家供大家参考，具体如下：

82244951 / 0评论 2016-01-14

jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

本文实例讲述了jQuery实现的给图片点赞+1动画效果。分享给大家供大家参考，具体如下：。完整实例代码点击此处本站下载。<p>故事从很久很久以前开始，远在宇宙的另一端有一个星球，叫作柚柚星。柚柚星人他们每天过着精彩而又快乐的生活，他们长的就像一

mengyun00 / 0评论 2015-12-31

jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考，具体如下：。完整实例代码点击此处本站下载。</html>希望本文所述对大家jQuery程序设计有所帮助。

zhaoxinglei00 / 0评论 2015-12-31

jquery实现初次打开有动画效果的网页TAB切换代码

本文实例讲述了jquery实现初次打开有动画效果的网页TAB切换代码。分享给大家供大家参考。这是一款初次打开有动画效果的网页TAB代码，只在第一次点击TAB菜单的时候，会显示动画，再次点击的时候就没有了，一个实用的网页选项卡效果，有需要的请下载吧。.dem

seoppt / 0评论 2015-09-06

一个支付页面DEMO附截图

.ui-list-icons li { float:left; margin:0px 10px 25px 0px; width:218px; padding-right:10px; display:inline; }. .ui-list-icons li

slytop / 0评论 2019-04-18

浅谈游戏制作过程

游戏制作的开始，就和文档有着密不可分的关系。当一个想法在主策划或者老板的脑海中产生时，他需要把想法整理成文字备忘录一类的东西。当然，老板会用交谈的方式讲给主策划听，然后由主策划整理成文。这些文字将作为游戏的最初形态被保存下来，并在项目结尾时，和完成后的游戏

guangxiaove / 0评论 2011-12-26

简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

YUYISHARE / 0评论 2011-02-14

实战Unity3D开发：从认识界面到游戏demo

众所周知，Unity3D是一个能够实现轻松创作的多平台的游戏开发工具，是一个全面整合的专业游戏引擎。在现有的版本中，其强大的游戏制作功能已 经达到让人瞠目结舌的地步。尤其是它在3.0版本里面制作的那款第一人称战争游戏，画质效果丝毫不逊色于当下十分流行的《穿

wuxiaoming / 0评论 2013-04-24

微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】

本文实例讲述了微信小程序五子棋游戏的棋盘，重置，对弈实现方法。分享给大家供大家参考，具体如下：

zzxwbs / 0评论 2019-02-20

微信小程序五子棋游戏AI实现方法【附demo源码下载】

本文实例讲述了微信小程序五子棋游戏AI实现方法。分享给大家供大家参考，具体如下：。var max = 0,u = 0, v = 0;

wildridder / 0评论 2019-02-20

mybatis异常invalid comparison: java.util.Date and java.lang.String

= null and productionDate !

MATLAB / 0评论 2018-05-19

iOS AutoLayout还可以这样玩

网上关于Auto Layout的文章繁多， 但是总觉得有些内容并没有说清楚。所以在这篇博文，我将通过一个demo演示Auto Layout中几个容易被忽略，但是又相当重要的概念。也就是当Label的内容过长时，会显示出省

郎启旭的写字本 / 0评论 2017-12-26

每天一个JS 小demo之“拖拽”效果的实现。主要知识点：event

<!

软件设计 / 0评论 2017-06-21

数梦工厂笔试题回顾一----finally在return之后执行还是之前？

我写的答案是result=1234 demo.str=1234。在我的记忆中finally是异常捕获关键词，finally代码块一定会执行。但我对其的执行过程并不十分清楚，以前一直认为一旦遇到return返回,即代表函数结束，则finally在return

编程爱好者联盟 / 0评论 2016-10-15