芝麻圆表

<!DOCTYPE>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<!--适用于H5 手机端浏览器-->
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<link rel="dns-prefetch" href="#">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<!--结束-->
<title>微信</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<style type="text/css">
html,
body,
div,
canvas,
a {
margin: 0px;
padding: 0px;
}

html,
body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
}
#clockBoard {
width: 550;
height: 760;
margin: 0px auto;
margin-top: 10%;
margin-bottom: 0px;
background: linear-gradient(#0e83f5, #20bcf5);
}
#pointer {
position: relative;
top: -560px;
}
#value {
position: relative;
z-index: 10;
top: -500;
left: 210;
border-radius: 5px;
line-height: 20px;
}
#run {
position: relative;
z-index: 10;
top: -450;
left: 105;
padding: 5px;
border-radius: 5px;
background: #40ccf5;
border: 1px solid #40bce5;
width: 70px;
height: 30px;
line-height: 20px;
color: #fff;
font: 20px bold;
}
</style>

<body>
<div id="container">

<div id="clockBoard">
<canvas id="clock" width="450px" height="560px"></canvas>
<canvas id="pointer" width="450px" height="560px"></canvas>
<!--<input type="text" id="value" placeholder="你想得到的值" maxlength="4" min=‘300‘>
<button id="run">Run</button>-->
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById(‘clock‘);
var ctx = canvas.getContext(‘2d‘); // 绘制外环
ctx.beginPath();
ctx.arc(275, 330, 180, 30 / 180 * Math.PI, 150 / 180 * Math.PI, true);
ctx.strokeStyle = ‘#8dc9f8‘;
ctx.lineWidth = ‘3‘
ctx.stroke();
ctx.closePath(); // 绘制内环
ctx.beginPath();
ctx.arc(275, 330, 150, 30 / 180 * Math.PI, 150 / 180 * Math.PI, true);
ctx.strokeStyle = ‘#5db3f5‘;
ctx.lineWidth = ‘12‘;
ctx.stroke();
ctx.closePath();
ctx.translate(275, 330); // 绘制刻度
var total = [350, ‘较差‘, 550, ‘中等‘, 600, ‘良好‘, 650, ‘优秀‘, 700, ‘极好‘, 950];
for(var i = 0; i < 17; i++) {
if(i % 6 === 3) {
ctx.beginPath();
ctx.lineWidth = ‘2‘;
ctx.strokeStyle = ‘#8dc9f8‘;
ctx.moveTo(144 * Math.sin(7.5 * i / 180 * Math.PI), -144 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.lineTo(156 * Math.sin(7.5 * i / 180 * Math.PI), -156 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.moveTo(-144 * Math.sin(7.5 * i / 180 * Math.PI), -144 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.lineTo(-156 * Math.sin(7.5 * i / 180 * Math.PI), -156 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.stroke();
ctx.closePath();
} else {
ctx.beginPath();
ctx.lineWidth = ‘1‘;
ctx.strokeStyle = ‘#8dc9f8‘;
ctx.moveTo(150 * Math.sin(7.5 * i / 180 * Math.PI), -150 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.lineTo(156 * Math.sin(7.5 * i / 180 * Math.PI), -156 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.moveTo(-150 * Math.sin(7.5 * i / 180 * Math.PI), -150 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.lineTo(-156 * Math.sin(7.5 * i / 180 * Math.PI), -156 * Math.cos(7.5 * i / 180 * Math.PI));
ctx.stroke();
ctx.closePath();
}
} // 绘制文本
ctx.font = ‘‘;
ctx.fillStyle = ‘#8dc9f8‘;
ctx.textAlign = ‘center‘;
ctx.textBaseline = ‘bottom‘;
ctx.rotate((-7.5 * 15) / 180 * Math.PI);
for(var i = 0; i < 11; i++) {
ctx.fillStyle = i % 2 ? ‘#8dc9f8‘ : ‘#cce8fc‘;
ctx.fillText(total[i], 0, -124);
ctx.rotate((7.5 * 3) / 180 * Math.PI);
}
ctx.rotate(-7.5 * 18 / 180 * Math.PI);
ctx.fillStyle = ‘#8dc9f8‘;
ctx.font = ‘20px normal‘;
ctx.fillText(‘BETA‘, 0, -60);
ctx.font = ‘14px normal‘; // 获取当前日期
var date = new Date();
var ymd = date.getFullYear() + ‘.‘ + (date.getMonth() + 1) + ‘.‘ + date.getDate();
ctx.fillText(‘评估时间 : ‘ + ymd, 0, 95);
ctx.font = ‘45px bold‘; // 绘制动画需要重置幕布，所以重建一个canvas对象
var pointer = document.getElementById(‘pointer‘);
var ctxPoint = pointer.getContext(‘2d‘);

function run(inputValue) {
var timer;
var i = 0;
ctxPoint.translate(275, 330);
ctxPoint.fillStyle = ‘#fff‘;
ctxPoint.strokeStyle = ‘#fff‘; // 设置最终的值
var finalValue = inputValue;
var value = 0; // 根据值的大小确定应该到达的位置
if(finalValue < 550) {
value = (finalValue - 316.7) * 0.225;
} else if(finalValue < 700) {
value = (finalValue - 550) * 0.9 + 52.5;
} else {
value = finalValue > 1000 ? 1000 : finalValue;
value = (value - 700) * 0.18 + 187.5;
}
var evluate = ‘‘;
if(inputValue < 550) {
evluate = ‘较差‘
} else if(inputValue < 600) {
evluate = ‘中等‘;
} else if(inputValue < 650) {
evluate = ‘良好‘;
} else if(inputValue < 700) {
evluate = ‘优秀‘;
} else {
evluate = ‘极好‘;
}
ctxPoint.font = ‘95px bold‘;
ctxPoint.textAlign = ‘center‘;
ctxPoint.shadowColor = ‘#fff‘; // 所有的动画事件
function slideValue() {
ctxPoint.translate(-275, -330);
ctxPoint.clearRect(0, 0, pointer.width, pointer.height);
ctxPoint.translate(275, 330);
i++; // 绘制滚动元素
ctxPoint.beginPath();
ctxPoint.shadowBlur = 30;
ctxPoint.arc(-180 * Math.sin((i + 60) / 180 * Math.PI), 180 * Math.cos((i + 60) / 180 * Math.PI), 5, 0, 2 * Math.PI, true);
ctxPoint.fillStyle = ‘#8dc9f8‘;
ctxPoint.fill();
ctxPoint.arc(-180 * Math.sin((i + 60) / 180 * Math.PI), 180 * Math.cos((i + 60) / 180 * Math.PI), 3, 0, 2 * Math.PI, true);
ctxPoint.fillStyle = ‘#fff‘;
ctxPoint.fill(); // 填充分数和评分
ctxPoint.font = ‘95px bold‘;
var text = 0;
if(i < 52.5) {
text = i / 0.225 + 316.7;
} else if(i < 187.5) {
text = (i - 52.5) / 0.9 + 550;
} else {
text = (i - 187.5) / 0.18 + 700;
text = text > 1000 ? 1000 : text;
}
text = text > inputValue ? inputValue : text;
ctxPoint.shadowBlur = 0;
ctxPoint.fillText(parseInt(text, 10), 0, 35);
ctxPoint.stroke();
ctxPoint.font = ‘35px bold‘;
ctxPoint.stroke();
ctxPoint.closePath(); // 如果到达所需要的弧度，则停止，否则继续跳动
if(i > value) {
setTimeout(function() {
ctxPoint.fillText(‘信用‘ + evluate, 0, 70);
}, 200);
clearTimeout(timer);
} else {
timer = setTimeout(slideValue, text / finalValue * 15);
}
}
slideValue();
} // 打开页面时默认的跳动数字
run(850); // 重新绘制的函数
var runBtn = document.getElementById(‘run‘);
var valueInput = document.getElementById(‘value‘);

function reRun() { // 判断输入的内容是否合乎预期
if(isNaN(parseInt(valueInput.value), 10)) {
return 0;
}
ctxPoint.translate(-275, -330);
run(parseInt(valueInput.value, 10));
} // 按钮事件，当点击时重新绘制
/*runBtn.onclick = reRun; // 键盘事件，当输入数字回车后重新绘制
window.document.onkeydown = function(e) {
var e = e || window.event;
if(e.keyCode === 13) {
reRun();
}
}*/
}
</script>
</body>

</html>

时间： 2025-01-17 13:21:27

芝麻圆表的相关文章

计数单位-科学计数法

--[]数字单位编辑 <五经算术>:按黄帝为法,数有10等.及其用也,乃有三焉. 十等者,谓"亿.兆.京.垓.秭.穰.沟.涧.正.载"也. 三等者,谓"上.中.下"也. 中国古代亿以上的大数计数方法有三个体系:这是我国东汉时期的<数述记遗>书中所载. [下数者>十进系统](十十变之)十进系统,皆以十递进(10万为亿,10亿为兆,10兆为京)到了近代,直至解放前我国还流行十进的系统 [中数者>万进系统](万万变之)万进系统,皆以万递

日本常用姓氏表收集

Abe 阿部.安部.安倍.阿倍. Abei 安倍井. Abigo 安孫子. Abigo 安孫子.安彥.吾孫子. Abiru 安蒜.阿比留. Abo 安保.阿保. Abumiya 鐙家. Aburai 油井. Aburatani 油谷. Aburaya 油谷. Acha 阿茶. Adachi 足立.安達.安立.足達.阿達. Adegawa 阿出川. Aeba 饗庭. Afuso 安富祖. Agata 縣.懸. Agatainukai 縣犬養. Agatsuma 我妻. Agawa 阿川. Agei

HTML&amp;#183;图片热点，网页划区，拼接，表单

HTML·图片热点,网页划区,拼接,表单 箬桊▲ 子这两位新城总督.到凉州刺史王培芳在内的六位副监再到北凉关内将近六万地方驻军和 建却然 酒至半酣又有两拨人几乎同时登楼先到一拨真是无巧不成书正是飞掠龙驹河小渡口的 徐凤年心中冷笑这做派可比数百个牛鼻子老道一同出迎更有心机. ハ庭奈 蚍榛帷跣 └仕犸ㄓ 李当心直截了当道:"曹长卿当年去两禅寺找过贫僧连他这个赵勾最大的死敌也不太清 方才寺中见到伯柃袁疆燕这位成名已久的大人物眼神隐晦阴沉更让许慧扑毛骨悚然. 北凉结亲举族迁往北凉.青州将军洪灵枢则

树莓派进阶之路 (031) -字符问题（1） - GBK汉字编码表(转)

转载:http://blog.sina.com.cn/s/blog_8184e033010109ug.html 基本简介 GB码,全称是GB2312-80<信息交换用汉字编码字符集基本集>,1980年发布,是中文信息处理的国家标准,在大陆及海外使用简体中文的地区(如新加坡等)是强制使用的唯一中文编码.P-Windows3.2和苹果OS就是以GB2312为基本汉字编码, Windows 95/98则以GBK为基本汉字编码.但兼容支持GB2312.GB码共收录6763个简体汉字.682个符号,其中

句容市高档腕表回收卡地亚戒指百尚名表回收他家回收奢侈品

手机威信18761924999回收二手手表-回收奢侈品-回收单反相机-回收珠宝首饰上门回收手表-二手名表回收-哪里回收手表-回收二手奢侈品-回收名牌包包-单反相机回收镜头-珠宝首饰回收钻戒-黄金回收-电脑回收手机-平板回收苹果爱马仕.LV.迪奥.香奈儿古驰.宝格丽百达翡丽.朗格.爱彼.宝珀.雅典.宝玑.江诗丹顿.格拉苏蒂.积家.伯爵.帕玛强尼.法兰克穆勒.万国.芝柏.卡地亚.劳力士.真力时.欧米茄.沛纳海.百年灵.萧邦.宇舶.尊皇.昆仑.帝舵.名士.豪雅.万宝龙.宝齐莱.雷蒙威.豪利时.浪琴汉米

Unicode汉字编码表以及参考源码分享

1 Unicode编码表 Unicode只有一个字符集,中.日.韩的三种文字占用了Unicode中0x3000到0x9FFF的部分  Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个字符, 比如汉字"经"的编码是0x7ECF,注意字符编码一般用十六进制来 表示,为了与十进制区分,十六进制以0x开头,0x7ECF转换成十进制 就是32463,UCS-2用两个字节来编码字符,两个字节就是16位二进制, 2的16次方等于65536,所以UCS-2最多能编码65536个字符.

SQL省市区三级表结构

-- 表的结构 areaDROP TABLE  area;CREATE TABLE  area (   id int NOT NULL ,  areaID int NOT NULL,  area varchar(200) NOT NULL,  fatherID int NOT NULL,  PRIMARY KEY  (id) ) DROP TABLE city;CREATE TABLE  city select   id int NOT NULL ,  cityID int NOT NULL, 

文字コード表 シフトJIS(Shift_JIS)

http://charset.7jp.net/sjis.html 文字コード表 シフトJIS(Shift_JIS) シフトJISの1バイトコード(半角文字)のエリア 0x00-0x1f.0x7f は制御コードです 0x20-0x7e はASCII文字です 0xa1-0xdf は半角カタカナです シフトJISの2バイトコード(全角文字)のエリア(JIS X 0208の漢字エリア)  上位1バイト 0x81-0x9f. 0xe0-0xef  下位1バイト 0x40-0x7e. 0x80-0xfc 

mysql省市区数据库表

一:创建表 1省: create table CREATE TABLE `provinces` ( `id` int(11) NOT NULL AUTO_INCREMENT, `provinceid` int(11) NOT NULL, `province` varchar(100) NOT NULL DEFAULT '', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=392 DEFAULT CHARSET=utf8 2:市 create