代码:

<!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. python数据类型-----列表

    今天来总结下python3.4版本列表的一些操作方法. 列表(list): 1.列表就像一个线性容器,但是比C++的 lis t扩展多得多,列表里的元素可以是相同类型,也可以包含各种类型,比如列表里嵌 ...

  2. echarts 图表建立步骤

    需要引用的文件 <script src="web/mobile/js/jquery-1.8.3.min.js"></script> <script s ...

  3. python3生成测试数据，并写入ssdb

    import pyssdb import random import time c = pyssdb.Client() chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoP ...

  4. SQL 建立多个字段唯一性校验

    由于在做压力测试,同一时间占用的问题. 两个用户同时下同一时间的订单,需要增加校验,第一个能保存的用户保存,第二个就不能让保存了. 问题是通过代码,怎么都做不到毫秒级校验,所以解决办法就只能是通过数据 ...

  5. 转：Laravel 安装指南

    Git 介绍 之所以要说 Git,就是因为 Composre 有时需要用到 Git,还是安装上比较好,Composer 暂且不表,先来了解一下 Git 吧(已经安装的童鞋跳过这里,直接看 Compos ...

  6. HDU 1308 What Day Is It?（模拟，日期）

    解题报告:输入一个年月日,让你求出那一天是星期几,但是做这题之前必须先了解一点历史.首先在1582年之前,判断是否是闰年的标准是只要能被四整除就是闰年, 然后在1752年9月2号的后的11天被抹去了, ...

  7. 训练指南 UVA - 11374（最短路Dijkstra + 记录路径 + 模板）

    layout: post title: 训练指南 UVA - 11374(最短路Dijkstra + 记录路径 + 模板) author: "luowentaoaa" catalo ...

  8. [BZOJ 2342] 双倍回文

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=2342 Algorithm: 解决回文串问题,一般从对称轴下手. 肯定先跑一边Manach ...

  9. [Contest20180321]nonintersect

    $\dfrac 2\pi$是个引人注目的数字,先来看看它到底是什么东西 假如有一条直线,它和题目所给的某条长度为$d$的线段夹角为$\theta$,那么线段在直线上的投影长度为$\left|d\cos ...

  10. python3开发进阶-Djamgo框架中的JSON和AJAX

    阅读目录 什么是JSON 什么是AJAX AJAX常见的应用情景 jQery实现AJAX AJAX请求如何设置csrf_token AJAX上传文件 补充Django内置的serializers 一. ...