Example of canvas--clock animation

Usually when the company is not busy, I like to write about some small effects and so on. Firstly, I can review and review, and secondly, I can find some problems.

Today I saw someone posting a picture of a watch in the group. Damn it... I have been working properly for many years. Then I thought about it and just do my own thing well. , thinking about what to do, I drew a watch....

Directly enter the code:

html

nbsp;HTML><meta><title>canvas clock</title><script></script><canvas></canvas><script>clock.canvasClock();</script>

js

var clock=(function(){function _canvasClock(){var cvs=document.getElementById('canvas');var ctx=cvs.getContext('2d');var PI=Math.PI;var lineWidth=5;                                             //线宽var gradient=ctx.createLinearGradient(10,10,580,580);        //设置圆的颜色渐变gradient.addColorStop("0","#a251ff");
        gradient.addColorStop(1,"#2ec2ff");
        ctx.fillStyle = '#ef6670';
        ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var second=time.getSeconds();                            //秒var Minute=time.getMinutes();                            //分var hour=time.getHours();                                //时//hour=hour+Minute/60;hour=hour>12?hour-12:hour;                               //表盘只有12小时            
            ctx.clearRect(0,0,600,600);                              //清空给定矩形内的指定像素//画圆            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,290,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();
            
            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,10,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();            for(var i=0;i

I originally planned to encapsulate it, but when I got off work, I came to do the task and it flew away. ...

The above is the detailed content of Example of canvas--clock animation. For more information, please follow other related articles on the PHP Chinese website!