用Html5画了一个时间表
.myClass{margin: 20px atuo;position:relative;width:800px;}#panel{border: 1px solid #CCC;}var thisObj = function(){this.canvas = document.getElementById("panel");this.context = this.canvas.getContext("2d");this.hour = 1;this.minute = 29;this.second = 1;}var i;i = window.setInterval(function(){thisObj.context.clearRect(-200, -100, thisObj.canvas.width, thisObj.canvas.height);setObjValue();drawHour();drawHourFont();drawMinute();drawCenter();drawClockwise();drawMinuteHand();drawSeconds();setAuthor();},10);function setObjValue(){if(thisObj.second == 60){thisObj.second = 1;thisObj.minute = thisObj.minute + 1;}if(thisObj.minute == 60){thisObj.minute = 1;thisObj.hour = thisObj.hour + 1;}thisObj.second = thisObj.second + 1;}function init(){thisObj = new thisObj();thisObj.context.translate(200, 100);}//小时function drawHour(){thisObj.context.save();thisObj.context.strokeStyle = '#FF0000';thisObj.context.beginPath();//注意thisObj.context.arc(200, 100, 150, 0, Math.PI * 2, false);thisObj.context.stroke();thisObj.context.restore();}//设置字function drawHourFont(){saveAndRestore(function(){var j = 4;thisObj.context.lineWidth = 4;for(var i = 0; i < 12; i ++){thisObj.context.rotate(Math.PI / 6);thisObj.context.beginPath();thisObj.context.moveTo(140, 0);thisObj.context.lineTo(150, 0);thisObj.context.fillText(j+"点", 160, 0);j = (j == 12 ? 0: j);j++;thisObj.context.stroke();}});}//分钟function drawMinute(){saveAndRestore(function(){for(var i = 0; i < 60; i ++){if(i % 5 != 0){thisObj.context.beginPath();thisObj.context.moveTo(145, 0);thisObj.context.lineTo(150, 0);thisObj.context.stroke();}thisObj.context.rotate(Math.PI / 30);}});}//圆心function drawCenter(){saveAndRestore(function(){thisObj.context.beginPath();//thisObj.context.fillStyle = '#0000FF';thisObj.context.arc(0,0, 10, 0, Math.PI * 2, false);thisObj.context.fill();});}//时针function drawClockwise(){saveAndRestore(function(){thisObj.context.rotate(thisObj.hour * (Math.PI / 6));commHand(0);});}//分针function drawMinuteHand(){saveAndRestore(function(){thisObj.context.rotate(thisObj.minute * (Math.PI / 30));commHand(-30);});}//秒针function drawSeconds(){saveAndRestore(function(){thisObj.context.rotate(thisObj.second * (Math.PI / 30));commHand(-60);});}function commHand(i){thisObj.context.fillRect(-5, -2, 10, -60 + i);thisObj.context.fill();thisObj.context.lineJoin = 'round';thisObj.context.moveTo(-10, -61+ i);thisObj.context.lineTo(0, -70+ i);thisObj.context.lineTo(10, -61+ i);thisObj.context.lineTo(10, -61+ i);thisObj.context.lineTo(-10, -61+ i);thisObj.context.fill();}function saveAndRestore(funCall){thisObj.context.save();thisObj.context.translate(200, 100);funCall();thisObj.context.restore();}function setAuthor(){saveAndRestore(function(){thisObj.context.font = '20px impact';thisObj.context.fontStyle = '#FF0000';thisObj.context.fillText('作者：王明', 260, 150);thisObj.context.fillText('2012年10月18日', 260, 180);thisObj.context.stroke();});}window.addEventListener("load", init, true);
<div class="myClass"> <canvas id="panel" width="800" height="433" /> </div>
页:
[1]