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

本作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. Mysql数据库大表归档操作

    由于公司的某个系统数据表过亿,考虑到数据表的压力.所以根据某个时间点对数据表做了一个归档.以下的操作是在当前的数据库新建表用于存储历史数据,然后再对生产表做一个清理操作.如果有条件的话可以把归档的数据 ...

  2. ICO如此疯狂为哪般？

    编者语: 独角兽一词起源于硅谷,是投资行业,尤其是风险投资业的术语,指的是那些估值超过十亿美元的创业公司.独角兽凤毛麟角,占创业公司总数的0.1%都不到.鑫根资本认为,一个独角兽能达到如此估值,肯定是 ...

  3. delphi 消息的使用

    //分析结果 WM_AnalysisResult = WM_USER + 1009; SendMessage(G_MainHandle, WM_AnalysisResult, 0, 0); proce ...

  4. UIScrollView的判断位置的属性如下：

    contentSize:CGSize类型,scrollview可以滑动的区域,例如,一个view的frame为(0,0,320,480),而scrollview的contentSize为(320,10 ...

  5. C#编程（二十五）----------接口

    接口 如果一个类派生自一个接口,声明这个类就会实现某些函数.并不是所有的面向对象的语言都支持接口. 例如,有一个接口:IDispoable,包含一个方法Dispose(),该方法又类实现,用于清理代码 ...

  6. Linux tar包相关命令

    tar [-j|-z][cv][-f 新建的文件名] filename... <==打包与压缩 tar [-j|-z][tv][-f 新建的文件名]   <==查看文件名 tar [-j| ...

  7. cocos2d-x retain和release倒底怎么玩？

    转载请注明,原文地址: http://blog.csdn.net/musicvs/article/details/8689345 正文: 1. 为什么会有retain? C++和Java不一样,Jav ...

  8. Storm实时计算系统

    来自知乎: 伴随着信息科技日新月异的发展,信息呈现出爆发式的膨胀,人们获取信息的途径也更加多样.更加便捷,同时对于信息的时效性要求也越来越高.举个搜索场景中的例子,当一个卖家发布了一条宝贝信息时,他希 ...

  9. JDK配置 linux

    在启动终端并输入 gedit /etc/profile 在末尾添加一下配置,保存并退出 #set jdk environment export JAVA_HOME=/usr/lib/jvm/jdk1. ...

  10. Android性能检测工具——traceview

    之前的几篇文章中介绍了android中常用的一些工具,今天介绍的工具也是比较实用和方便的,它可以用量化的指标告诉我们哪个方法执行的时间最长,被调用的次数最多,有没有重复调用.下面我们就来看看它是怎么为 ...