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

本作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. STM32的PWM输入模式设置并用DMA接收数据

    参考 :STM32输入捕获模式设置并用DMA接收数据 PWM input mode This mode is a particular case of input capture mode. The ...

  2. Understanding the STM32F0's GPIO

    Understanding the STM32F0's GPIO This is the first part of the GPIO tutorial for the STM32F0Discover ...

  3. Eclipse Mark Occurrences

    Mark Occurrences The Mark Occurrences feature enables you to see where an element is referenced by s ...

  4. 《Go语言实战》摘录：7.3 并发模式 - work

    7.3 并发模式 - work

  5. 我所经历的SAP选型[转]

    这是一个失败的选型项目,而且在可遇见的未来公司也不会再经历SAP选型,甚至不会再启动erp项目,个中原因很难一言道尽,在此简要的说说我们的选型过程以及在选型过程中对各种因素的考虑. 一.重启选型工作七 ...

  6. .Net Discovery 系列之六--深入浅出.Net实时编译机制(下)

    接上文 在初始化时,HashTable中各个方法指向的并不是对应的内存入口地址,而是一个JIT预编译代理,这个函数负责将方法编译为本地代码.注意,这里JIT还没有进行编译,只是建立了方法表! 下表(表 ...

  7. 什么是.Net, IL, CLI, BCL, FCL, CTS, CLS, CLR, JIT

    什么是.NET? 起源:比尔盖茨在2000年的Professional Developers Conference介绍了一个崭新的平台叫作Next Generation Windows Service ...

  8. Delphi 实现对注册表的监视和扫描

    ;iRes := RegEnumKey( hKeyx, dwIndex, buf, dwSize );if iRes = ERROR_NO_MORE_ITEMS thenbreakelse if iR ...

  9. poi workbook转成流

    try { ByteArrayOutputStream bos = new ByteArrayOutputStream(); workbook.write(bos); byte[] barray = ...

  10. redis实现发布（订阅）消息

    redis实现发布(订阅)消息 什么是redis的发布订阅(pub/sub)?   Pub/Sub功能(means Publish, Subscribe)即发布及订阅功能.基于事件的系统中,Pub/S ...