HTML5 Canvas 练习(简单时钟)

最新推荐文章于 2024-10-06 06:13:14 发布

肆追鹰

最新推荐文章于 2024-10-06 06:13:14 发布

阅读量966

点赞数

分类专栏： Demos 文章标签： html5 canvas 2d

本文链接：https://blog.csdn.net/stringblog/article/details/20797755

版权

Demos 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始学习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())。

时间诚可贵，什么价更高？