在线监测系统由数据采集、数据分析处理、数据远程传输以及Client等多部分组成。传感器采集到特征信号后，本地系统对该信号进行分析与处理，进而确定系统的运行状态，紧接着需要把数据结果传输到远端Client。在现实在线监测系统中，一般建立了传输数据的标准格式，并且在Client对得到的文件进行解析，本推文以网上很火的时钟小程序为例（结果如下图所示），对传输文件的格式进行简单介绍，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>time</title>
</head>
<body>
<canvas id="graph" width="1366px" height="768">你的浏览器不支持time</canvas>
<script type="text/javascript">
var canvas = document.getElementById('graph');
var context = canvas.getContext('2d');
var r = canvas.width/5; //半径
//将坐标中心作为起启点
context.translate(canvas.width / 2, canvas.height / 2);
function drawCircle() {
context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.arc(0, 0, r, 0, Math.PI * 2, true);
context.stroke();
context.closePath();
}
function drawClockScale() {
var rad = 0, angle, font, fontX, fontY;
context.fillStyle = '#000';
// 绘制表盘时刻度
for (var i = 0; i < 12; i ) {
context.save();
rad = i * Math.PI / 6; // 弧度制，大刻度，总共分为12刻度，每刻度为：2π/12 → π/6
context.rotate(rad); // 旋转画布绘制刻度
context.fillRect(r - 10, 0, 10, 5);
context.restore();
}
// 绘制表盘分刻度
for (i = 0; i < 60; i ) {
context.save(); // 记录旋转画布之前初始状态
rad = i*Math.PI/30;
context.rotate(rad); // 旋转画布绘制刻度
context.fillRect(r - 10, 0, 5, 2); //绘制
context.restore(); // 恢复初始状态，未旋转前
}
// 绘制表盘文字
for(i = 0;i<12;i ){
angle = i * 30;
// 转换为弧度制,Math.sin、Math.cos都接受弧度制单位
angle = angle*Math.PI/180;;
font = (i 3 > 12)?i 3-12 : i 3;
fontX = Math.round(Math.cos(angle)*(r-30));
fontY = Math.round(Math.sin(angle)*(r-30));
context.font = 'bold 14px 微软雅黑';
context.fillText(font '',fontX,fontY);
}
}
function drawHand(rotate,width,height){
context.save();
rotate = rotate*Math.PI/180; // 转换为弧度制
context.rotate(rotate);
context.fillRect(-10,0,width,height);
context.restore();
}
function setTime(){
var hour = new Date().getHours();
var minute = new Date().getMinutes();
var second = new Date().getSeconds();
//console.log(hour ':' minute ':' second);
var hourRotate,minRotate,secRotate;
// 计算秒针角度并绘制图形
secRotate = second*6-90;
drawHand(secRotate,r-30,2);
// 计算分针角度并绘制图形
minRotate = (minute*60 second)*0.1 - 90;
drawHand(minRotate,r-50,4);
// 计算时针角度并绘制图形
hourRotate = (hour*60*60 minute*60 second)/120 - 90;
drawHand(hourRotate,r-70,5);
}
setInterval(function(){
context.clearRect(-canvas.width / 2,-canvas.height / 2,canvas.width,canvas.height);
drawCircle();
drawClockScale();
setTime();
},1000);
</script>
</body>
</html>
