HTML5 Canvas 小例子旋转的时钟

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <script type="text/javascript" src="jQuery.js"></script>

</head>

<style type="text/css">

    body {

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas {

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas>span {

        color: white;

        font-size: 14px;

    }

</style>

<body>

    <canvas id="canvas" width="600" height="500">

    <span>您的浏览器不支持</span>

</canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    canvas = oc.getContext('2d');

    /*定义圆心和半径*/

    var x = 250, y = 250, r = 150;

    var time = setInterval(function() {

        ClocksWatche();

    }, 1000);

    function ClocksWatche() {

        /*清理画布*/

        canvas.clearRect(0, 0, oc.width, oc.height);

        /*开始绘制*/

        canvas.beginPath();

        for(var i = 0; i < 60; i++) {

            /*绘制起始点移到圆心*/

            canvas.moveTo(x, y);

            /*根据圆心和半径每6度绘制一次(圆心横坐标,圆心纵坐标,其实弧度,结束弧度,是否逆时针)*/

            canvas.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);

        }

        /*连接至起始点*/

        canvas.closePath();

        /*画线*/

        canvas.stroke();

        /*设置线的粗细*/

        canvas.lineWidth = 3;

        /*开始绘制*/

        canvas.beginPath();

        for(var i = 0; i < 60; i++) {

            /*绘制起始点移到圆心*/

            canvas.moveTo(x, y);

            /*根据圆心和半径没30度绘制一次*/

            canvas.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);

        }

        /*连接至起始点*/

        canvas.closePath();

        /*画线*/

        canvas.stroke();

        /*设置填充颜色*/

        canvas.fillStyle = 'white';

        canvas.beginPath();

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 14 / 15, 0, 360, false);

        canvas.closePath();

        canvas.fill();

        var loacalDate = new Date();

        var hours = loacalDate.getHours();

        var minute = loacalDate.getMinutes();

        var sencond = loacalDate.getSeconds();

        hours = (hours * 30 - 90 + minute / 2) * Math.PI / 180;

        minute = (minute * 6 - 90) * Math.PI / 180;

        sencond = (sencond * 6 - 90) * Math.PI / 180;

        canvas.beginPath();

        canvas.lineWidth = 5;

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 8 / 15, hours, hours, false);

        canvas.stroke();

        canvas.beginPath();

        canvas.lineWidth = 3;

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 10 / 15, minute, minute, false);

        canvas.stroke();

        canvas.beginPath();

        canvas.lineWidth = 1;

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 14 / 15, sencond, sencond, false);

        canvas.stroke();

    }

</script>
巴特西

HTML5 Canvas 小例子旋转的时钟

最新文章

热门文章

巴特西

HTML5 Canvas 小例子 旋转的时钟

最新文章

热门文章

HTML5 Canvas 小例子旋转的时钟
