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

本作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. IAR EWARM 字体设置

    如果只想简单的设置,可进行如下设置 Tools->IDE Options->Editor->Colors and Fonts->Editor Font->Font 但是这 ...

  2. JBPM使用方法、过程记录

    一.How to call Web Service Using JBPM 5, designer https://204.12.228.236/browse.php?u=ObFK10b3HDFCQUN ...

  3. linux搭建C开发环境

    目前决大多 数的Linux用户对Linux的了解还处于比较低级的层次,他们可能会几条命令.会配几种服务.会用rpm来安装软件.会操作KDE/Gnome界机等等,但是当他们遇到一些需要编译安装的软件时, ...

  4. Android开发 AIDL使用自定义对象作参数或返回值

    http://www.pocketdigi.com/20121129/952.html 默认,AIDL支持对象作参数,但需要该对象实现Parcelable接口,且aidl文件应该是该类在同一包下,需要 ...

  5. Shell 命令行快捷键

    在shell命令终端中.Ctrl+n相当于方向向下的方向键,Ctrl+p相当于方向向上的方向键. 在命令终端中通过它们或者方向键能够实现对历史命令的高速查找.这也是高速输入命令的技巧. 在命令终端中能 ...

  6. SharePoint 如何导出部署的场解决方案

    前言 当我们在做服务器场迁移或者备份的时候,经常需要场中部署的解决方案包,然而,很多时候,我们无法找到这些解决方案包.很多解决方案在部署的时候,可能就已经删掉了,很多解决方案由于时间久远,我们不知道哪 ...

  7. iOS酷炫动画效果合集

    iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...

  8. Javascript与Objective-C 字符串与数组的方法类比

    table {border-collapse:collapse;} table td {border:1px solid #ccc;} String vs NSString JavaScript st ...

  9. centos升级到最新的mysql

    去站点下载mysql的yum源.地址例如以下: http://repo.mysql.com/ 在linux上先查看系统的版本,依据版本相应下载 more /etc/redhat-release rpm ...

  10. [Android Security] Smali和逆向分析

    copy : https://blog.csdn.net/u012573920/article/details/44034397 1.Smali简介 Smali是Dalvik的寄存器语言,它与Java ...