代码:

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>钟表</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:1px 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);
    };

    // 画刻度
    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=getColor(i/5);
                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="navy";
        ctx.fillText(hour+":"+minute+":"+second,-20,-120);

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

        context.save();
        context.rotate(getRad(-90));

        var x,y;

        context.lineWidth=0.5;
        x=(this.radius-2)*Math.cos(getRad(angleS));
        y=(this.radius-2)*Math.sin(getRad(angleS));
        ctx.strokeStyle = "black";
        ctx.beginPath();
        ctx.moveTo(-x/3, -y/3);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();

        context.lineWidth=1.5;
        x=(this.radius-8)*Math.cos(getRad(angleM));
        y=(this.radius-8)*Math.sin(getRad(angleM));
        ctx.strokeStyle = "yellow";
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();

        context.lineWidth=2;
        x=(this.radius-25)*Math.cos(getRad(angleH));
        y=(this.radius-25)*Math.sin(getRad(angleH));
        ctx.strokeStyle = "maroon";
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();

        context.restore();

        ctx.fillStyle="black";
        ctx.arc(0,0,2.5,0,Math.PI*2,false);
        ctx.fill();
    };
}

//  常规函数:角度得到弧度
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>

代码下载：

https://files.cnblogs.com/files/xiandedanteng/clock20170926.rar

HTML5 Canvas 绘制二十四字真言钟表的更多相关文章

  1. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  2. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  4. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  8. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. JavaScript秘密花园

    译文地址 bonsaiden.github.io/JavaScript-Garden/zh/#intro.authors 之前被人问到JS一些概念性的东西,感觉很模糊,可能层次比较浅,偏理论的东西实践 ...

  2. 层级数据模板 案例（HierarchicalDataTemplateWindow）

    1.xaml 文件 <Window x:Class="DataTemplate.HierarchicalDataTemplateWindow"        xmlns=&q ...

  3. Tomcat 部署2个项目，只有一个可以访问的解决方案

    Tomcat 部署2个应用后只有一个可以访问,另一个不能访问,一般来说就是因为Tomcat启动加载了配置文件后,当启动另一个应用时由于一些配置名称相同所以不再加载,导致之后应用无法正常启动. 异常信息 ...

  4. 16.RDD实战

    第16课:RDD实战 由于RDD的不可修改的特性,导致RDD的操作与正常面向对象的操作不同,RDD的操作基本分为3大类:transformation,action,contoller 1.   Tra ...

  5. spark热点互动问答

    [Spark亚太研究院 决战云计算大数据时代 100期公益大讲堂 互动问答] Q1:我想问,hdfs的namenode挂了,怎么处理? 使用ZooKeeper: 使用Mesos: 使用Yarn: Q2 ...

  6. 2017中南大学暑期集训day1 : debug&STL-A

    A - Surprising Strings 题意就是给你一个字符串,例如ZGBG,有一种称谓叫D-unique 这个字符串 在D=0时, 有三个子串 ZG GB BG,因为这三个都不同,也就是uni ...

  7. Tarjan求LCA总结

    Tarjan算法向上标记法:从x向上走到根节点,并标记所有经过的点从y向上走到根节点,当第一次遇到已标记的节点时,就找到了LCA(x, y)对于每个询问,向上标记法的时间复杂度最坏为O(n) 在深度遍 ...

  8. centos7下ip转发的配置

    1.先确认ipv4配置了转发设置 vim /etc/sysctl.conf                    #命令1(编辑配置文件) net.ipv4.ip_forward=1          ...

  9. jboss启动时java VM参数设置

    jboss服务器中jvm参数的设置: 在$JBOSS_HOME/bin下的run.sh里面存在这么一个设置: # Force IPv4 on Linux systems since IPv6 does ...

  10. 【博弈论】【SG函数】Codeforces Round #188 (Div. 1) D. Game with Powers

    将整个游戏可以划分成若干个互不相交的子游戏. 每个子游戏的sg值只与其中的数的个数有关.而这个数不会超过30. 于是可以预处理出这个sg值表. 然后从1到n枚举,对<=sqrt(n)的部分,用个 ...