动态效果点此下载用浏览器打开观看。

本作Github地址：https://github.com/horn19782016/12MaximClock

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>钟表 2019年3月4日19点30分 by:逆火狂飙 horn19782016@163.com</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:0px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
    var canvas=document.getElementById('myCanvus');
    canvas.width=400;
    canvas.height=400;    

    context=canvas.getContext('2d');
    context.translate(200,200);

    clock=new Clock(200);
    clock.init();

    animate();
};

var context;
var clock;

function animate(){
    context.clearRect(-200,-200,400,400);// 清屏

    clock.paintBg(context);
    clock.paintScale(context);
    clock.paintPointers(context);

    if(true){
        window.requestAnimationFrame(animate);
    }
}

// 钟表类
function Clock(radius){
    this.radius=radius;
    this.img;

    this.init=function(){
        this.img=new Image();
        this.img.src="bg.jpg";
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.drawImage(this.img,0,0,400,400,-200,-200,400,400);
        ctx.fillStyle="red";

        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var BL = width / 200;

        var r=this.radius;
        ctx.save();//保存一下最开始时钟的环境
        ctx.beginPath();
        ctx.lineWidth = 13.8 * BL;//线要 乘上 比例
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false);//乘上比例
        ctx.strokeStyle = "#000080";
        ctx.stroke();

        ctx.fillStyle="white";
        var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        ctx.font = 18 * BL + 'px Arial';//字体也有乘比例 字符串拼接
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        hourNumber.forEach(function (number, i) {
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 30 * BL);
            var y = Math.sin(rad) * (r - 30 * BL);
            ctx.fillText(number, x, y);
        });

        for (var i = 0; i < 60; i++) {
            var rad = 2 * Math.PI / 60 * i;
            var x = Math.cos(rad) * (r - 18 * BL);
            var y = Math.sin(rad) * (r - 18 * BL);
            ctx.beginPath();
            if (i % 5 == 0) {
                ctx.fillStyle = '#800080';
                ctx.arc(x, y, 2 * BL, 0, 2 * Math.PI, false);
            } else {
                ctx.fillStyle = '#c0c0c0';
                ctx.arc(x, y, 2 * BL, 0, 2 * Math.PI, false);
            }

            ctx.fill();
        }

        ctx.restore();
    };

    //  画汉字
    this.paintScale=function(ctx){
        var arr=["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"];
        var offset=16;

        ctx.save();
        ctx.rotate(getRad(-94.5));

        for(var i=0;i<60;i++){
            var degree=i*6;
            var x=(this.radius-offset)*Math.cos(getRad(degree));
            var y=(this.radius-offset)*Math.sin(getRad(degree));

            if((i % 5)==0){
                ctx.save();    

                var x1=(this.radius-20)*Math.cos(getRad(degree));
                var y1=(this.radius-20)*Math.sin(getRad(degree));

                ctx.translate(x1,y1);
                ctx.rotate(getRad(degree+96));
                ctx.font="bold 16px 宋体";
                ctx.fillStyle='white';
                ctx.fillText(arr[i/5],0,0);

                ctx.restore();
            }
        }

        ctx.restore();
    };

    // 画指针
    this.paintPointers=function(ctx){
        var date = new Date();
        var hour=date.getHours();
        var minute=date.getMinutes();
        var second=date.getSeconds();

        ctx.font="bold 12px 宋体";
        ctx.fillStyle="white";
        ctx.fillText(hour+":"+minute+":"+second,-20,-100);

        var angleS=second*6;
        var angleM=minute*6;
        var angleH=hour*30+angleM/360*30;

        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var BL = width / 200;

        context.save();
            context.rotate(getRad(-90));
            var x,y;

            // 画时针
            x=(this.radius-60)*Math.cos(getRad(angleH));
            y=(this.radius-60)*Math.sin(getRad(angleH));
            ctx.strokeStyle = "white";
            ctx.lineWidth = 3 * BL;//定义指针的宽
            ctx.lineCap = 'round';//指针顶部为弧

            ctx.beginPath();
            ctx.moveTo(-x/8, -y/8);
            ctx.lineTo(x,y);
            ctx.stroke();
            ctx.closePath();

            // 画分针
            x=(this.radius-45)*Math.cos(getRad(angleM));
            y=(this.radius-45)*Math.sin(getRad(angleM));
            ctx.strokeStyle = "white";
            ctx.lineWidth = 2 * BL;//定义指针的宽
            ctx.lineCap = 'round';//指针顶部为弧

            ctx.beginPath();
            ctx.moveTo(-x/8, -y/8);
            ctx.lineTo(x,y);
            ctx.stroke();
            ctx.closePath();

        context.restore();

        // 画秒针
        ctx.save();
            ctx.lineWidth=0.5;

            ctx.strokeStyle = "black";
            ctx.beginPath();

            var r=this.radius;
            ctx.rotate(getRad(angleS));
            ctx.moveTo(-2 * BL, 20 * BL);//画出一个秒针 x轴-2 y轴20
            ctx.lineTo(2 * BL, 20 * BL);
            ctx.lineTo(1, -r + 18 * BL);
            ctx.lineTo(-1, -r + 18 * BL);
            ctx.fill();

            ctx.stroke();
            ctx.closePath();
        ctx.restore();
    };
}

//  常规函数:角度得到弧度
function getRad(degree){
    return degree/180*Math.PI;
}

//  常规函数:得到颜色
function getColor(index){
    if(index==0){
        return "green";
    }else if(index==1){
        return "silver";
    }else if(index==2){
        return "lime";
    }else if(index==3){
        return "gray";
    }else if(index==4){
        return "white";
    }else if(index==5){
        return "yellow";
    }else if(index==6){
        return "maroon";
    }else if(index==7){
        return "navy";
    }else if(index==8){
        return "red";
    }else if(index==9){
        return "blue";
    }else if(index==10){
        return "purple";
    }else if(index==11){
        return "teal";
    }else if(index==12){
        return "fuchsia";
    }else if(index==13){
        return "aqua";
    }else if(index==14){
        return "black";
    }
}

//-->
</script>

2019年3月4日19点36分

[Canvas]新版箴言钟表的更多相关文章

  1. canvas 之 - 精灵 钟表动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 分别用canvas和css3的transform做出钟表的效果

    两种方式实际上在js上的原理都是一样的.都是获取时间对象,再获取时间对象的时分秒,时分秒乘以其旋转一刻度(一秒.一分.一小时)对应的角度.css3中要赋值于transform:rotate(角度),c ...

  3. canvas石英钟

    canvas石英钟:demo <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  4. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  5. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  6. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  7. Canvas基础——钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  8. HTML5 Canvas 绘制二十四字真言钟表

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  9. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

随机推荐

  1. swddude -- A SWD programmer for ARM Cortex microcontrollers.

    Introducing swddude I love the ARM Cortex-M series of microcontrollers.   The sheer computational po ...

  2. the difference between an embOS interrupt and a zero latency interrupt

    the difference between an embOS interrupt and a zero latency interrupt is the interrupt priority lev ...

  3. mysqlsandbox

    http://mysqlsandbox.net/ http://www.cnblogs.com/xuanzhi201111/p/3998604.html

  4. ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后

    ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...

  5. Delphi的自动编译软件Want

    Delphi自动编译环境的搭建及使用 什么是Want Want是一套Windows下用于编译Delphi源代码的工具.Want的名称是Windows Ant的意思. Ant是Java下最著名的自动编译 ...

  6. springcloud超时时间与重试次数配置

    #hystrix配置hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=120000ribbon.Conn ...

  7. i386、i586、i686、noarch、x86_64

    xxxxxxxxx.rpm   <== RPM的格式,已经经过编译且包装完成的rpm文件. xxxxxx.src.rpm   <== SRPM的格式,包含未编译的源代码信息. 例如rp-p ...

  8. Ubuntu下 ssh : connect to host localhost port 22:Connection refused

    Ubuntu下测试ssh时使用ssh localhost 命令,出现错误提示connect to host localhost port 22:Connection refused 造成这个错误的原因 ...

  9. 好汉两个半第一季/全集Two And A Half Men迅雷下载

    第一季 Two and a Half Men Season 1 (2003)看点:Charlie是一个潇洒自由的单身汉,但正面临离婚危机的兄弟Alan带着儿子Jake的突然来访完全打乱了Charlie ...

  10. cocos2d-x 保持屏幕点亮及自动变灰

    很早之前遇到的问题,现在记录一下.有一家Android渠道(抱歉,时间太长了已经记不大清楚是哪一家了 oppo/联想/酷派?)在我们提交新版本时拒绝了,理由是:手机背光状态下,屏幕不会自动变灰. 这里 ...