1.使用canvas实现一个简单的时钟

CSS代码：

   *{padding:0;margin:0;}
        body{
    background:#000000 url('背景.jpg') no-repeat fixed;
            font-family:华文新魏;
            font-size:30px;
        }
        #文章{
            background:rgba(200,200,200,0.4);
            height:100%;
            width:80%;
           margin:0 10%;

        }
        .代码区{
            white-space:pre-wrap;

        }
        #canvas{
            position:fixed;
            top:0;
            right:0;

        }

html代码：

<canvas id='canvas'width=300 height=300>
    can't use canvas
</canvas>

Js代码：（重点）

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        FONT_HEIGHT = 15,
        MARGIN = 35,
        HAND_TRUNCATION = canvas.width / 25,
        HOUR_HAND_TRUNCATION = canvas.width / 10,
        NUMBERAL_SPACING = 20,
        RADIUS = canvas.width / 2 - MARGIN,
        HAND_RADIUS = RADIUS + NUMBERAL_SPACING;
    function drawCircle(){
        context.beginPath();
        context.fillStyle = 'rgba(240,220,210,0.9)';
        context.arc(canvas.width / 2 , canvas.height / 2 ,
            canvas.width / 2 - MARGIN + 30 , 0 , Math.PI * 2 , true);
        context.stroke();
    }
    function drawNumerals(){
        var numerals = [1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12],
            angle = 0,
            numeralWidth = 0;
        numerals.forEach(function(numeral){
            angle = Math.PI / 6 * (numeral - 3);
            numeralWidth = context.measureText(numeral).width;
            context.fillStyle = 'rgba(50,200,250,0.9)';
            context.fillText(numeral,
                canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) -
                numeralWidth / 2,
                canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) +
                FONT_HEIGHT / 3
            );
        });
    }
    function drawCenter(){
        context.beginPath();

        context.arc(canvas.width / 2 , canvas.height / 2 , 5 , 0 ,
            Math.PI * 2 , true);
        context.fill();
    }
    function drawHand(loc , isHour){
        var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
            handRadius=isHour ? RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION+20
                : RADIUS-HAND_TRUNCATION;
        context.strokeStyle = 'rgba(240,220,210,0.9)';
        context.moveTo(canvas.width / 2,canvas.height / 2);
        context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,
            canvas.height / 2 + Math.sin ( angle ) * handRadius);
        context.stroke();
    }
    function drawHands(){
        var date = new Date,
            hour = date.getHours();
        hour = hour > 12 ? hour - 12 : hour;
        drawHand(hour * 5 + (date.getMinutes() / 60) * 5 , true , 0.5);
        drawHand(date.getMinutes() , false , 0.5);
        drawHand(date.getSeconds() , false , 0.2);
    }
    function drawClock(){
        context.clearRect(0 , 0 , canvas.width , canvas.height);
        drawCircle();
        drawCenter();
        drawHands();
        drawNumerals();
    }
    context.font = FONT_HEIGHT + 'px Arial';
    loop = setInterval(drawClock , 1000);