一个用Canvas做的“计时器”

Plux posted @ 2009年12月08日 20:55 in Default with tags canvas javascript , 1523 阅读

很久没有发代码了。发一个用HTML 5 Canvas做的简单计时器……

<html>
<head>
<title>A clock</title>
<script type="text/javascript">
var clock = 0;
window.onload = function () {
    setInterval(drawClock, 1000);
}
function drawClock() {
    var canvas = document.getElementById('drawing');
    if (canvas.getContext){
        ctx = canvas.getContext('2d');
        ctx.lineWidth = 5;
        // clear the drawing place.
        ctx.strokeStyle = "rgba(0, 0, 0, 1)";
        ctx.beginPath();
        ctx.arc(200, 50, 50, 0, Math.PI * 2, true);
        ctx.stroke();
        // start another drawing.
        ctx.lineCap = 'round';
        ctx.strokeStyle = "rgba(0, 250, 0, 0.8)";
        ctx.beginPath();
        ctx.arc(200, 50, 50, 0, Math.PI * clock, false);
        ctx.stroke();
    }
    if (clock >= 2) {
        clock = 0;
    } else {
        clock += 1 / 6;
    }
}
</script>
</head>
<body>
<canvas id="drawing" width="800" height="200"></canvas>
</body>
</html>

发现Canvas还是很强大的。


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter