芝麻圆表

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

<head>
<meta charset="UTF-8">

<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 {
100%;
height: 100%;
}
#container {
100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
}
#clockBoard {
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;
70px;
height: 30px;
line-height: 20px;
color: #fff;
font: 20px bold;
}
</style>

<div id="clockBoard">
<canvas id="clock" width="450px" height="560px"></canvas>
<canvas id="pointer" width="450px" height="560px"></canvas>

</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');

</html>