开始学习Canvas,写一个时钟。
<!doctype html>
<html>
<head>
<style type="text/css">
body {
background: #fff;
font-family: Arial;
}
#myClock {
position: absolute;
top: 12%;
left: 32%;
}
</style>
</head>
<body>
<canvas id="myClock" width="500" height="500">
Sorry,no supporting!
</canvas>
<script type="text/javascript">
var clock = document.getElementById('myClock');
var clockPaint = clock.getContext('2d');//获取绘图环境;
function draw ()
{
clockPaint.clearRect(0, 0, 500, 500);//每次重绘需清除画布;
var myDate = new Date();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
var bglg = clockPaint.createLinearGradient(100,100,400,400);//定义背景渐变;
bglg.addColorStop(0,'#111');
bglg.addColorStop(0.25,'#ccc');
bglg.addColorStop(0.7,'#111');
bglg.addColorStop(1.0,'#000');
//Circle border
clockPaint.lineWidth = 10;
clockPaint.strokeStyle = '#ccc';
clockPaint.beginPath();
clockPaint.arc(250, 250, 200, 0, Math.PI * 2, true);//绘制边框
clockPaint.closePath();
clockPaint.stroke();
//background
clockPaint.fillStyle = bglg;
clockPaint.arc(250, 250, 90, 0, Math.PI * 2, true);
clockPaint.fill();//绘制背景
//Hours 绘制时刻度
for (var i = 0; i < 12; i ++)
{
clockPaint.save();
clockPaint.lineWidth = 5;
clockPaint.strokeStyle = '#ccc';
clockPaint.translate(250, 250);
clockPaint.rotate(i * 30 * Math.PI / 180);
clockPaint.beginPath();
clockPaint.moveTo(0, - 190);
clockPaint.lineTo(0, - 170);
clockPaint.closePath();
clockPaint.stroke();
clockPaint.restore();
}
//Minutes 绘制分刻度
for (var j = 0; j < 60; j ++)
{
clockPaint.save();
clockPaint.lineWidth = 3;
clockPaint.strokeStyle = '#ccc)';
clockPaint.translate(250, 250);
clockPaint.rotate(j * 6 * Math.PI / 180);
clockPaint.beginPath();
clockPaint.moveTo(0, - 190);
clockPaint.lineTo(0, - 180);
clockPaint.closePath();
clockPaint.stroke();
clockPaint.restore();
}
//Hour pin
hour = hour + minute / 60;
hour = hour > 12 ? hour - 12 : hour;
clockPaint.save();
clockPaint.lineWidth = 10;
clockPaint.strokeStyle = '#ccc';
clockPaint.translate(250, 250);
clockPaint.rotate(hour * 30 * Math.PI / 180);
clockPaint.beginPath();
clockPaint.moveTo(0, - 100);
clockPaint.lineTo(0, - 10);
clockPaint.closePath();
clockPaint.stroke();
clockPaint.restore();
//Minutes pin
clockPaint.save();
clockPaint.lineWidth = 7;
clockPaint.strokeStyle = '#ccc';
clockPaint.translate(250, 250);
clockPaint.rotate(minute * 6 * Math.PI / 180);
clockPaint.beginPath();
clockPaint.moveTo(0, - 125);
clockPaint.lineTo(0, - 10);
clockPaint.closePath();
clockPaint.stroke();
clockPaint.restore();
//Second pin
clockPaint.save();
clockPaint.lineWidth = 5;
clockPaint.strokeStyle = '#ddd';
clockPaint.translate(250, 250);
clockPaint.rotate(second * 1 * Math.PI / 180);
clockPaint.beginPath();
clockPaint.moveTo(0, - 150);
clockPaint.lineTo(0, - 10);
clockPaint.closePath();
clockPaint.stroke();
clockPaint.restore();
//Point
clockPaint.save();
clockPaint.fillStyle = '#ddd';
clockPaint.arc(250, 250, 9, 0, Math.PI * 2, true);
clockPaint.fill();
clockPaint.restore();
}
setInterval(draw, 1000);
</script>
</body>
</html>
要点:1.每个一秒重绘画布,改变时,分,秒针的角度。
2.重绘前保存,重绘后重新载入(save() & restore())。
时间诚可贵,什么价更高?