HTML5 Canvas 画钟表

时间：2022-08-29 09:55:26

HTML5 Canvas 画钟表

画钟表是2D画图的老生常谈，我也不能免俗弄了一个。代码如下：

<!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="200px" height="200px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
    var canvas=document.getElementById('myCanvus');
    canvas.width=200;
    canvas.height=200;    

    context=canvas.getContext('2d');
    context.translate(100,100);

    clock=new Clock(100);
    clock.init();

    animate();
};

var context;
var clock;

function animate(){
    context.clearRect(-100,-100,200,200);// 清屏

    clock.paintBg(context);
    clock.paintScale(context);
    clock.paintNumbers(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="clock7.jpg";
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.drawImage(this.img,66,50,880,880,-100,-100,200,200);
    };

    // 画刻度
    this.paintScale=function(ctx){
        for(var i=0;i<60;i++){
            var degree=i*6;
            var x=this.radius*Math.cos(getRad(degree));
            var y=this.radius*Math.sin(getRad(degree));

            ctx.strokeStyle = "black";
            ctx.fillStyle="black";
            ctx.beginPath();

            if((i % 5)==0){
                ctx.arc(x,y,1.5,0,Math.PI*2,false);
            }else{
                //ctx.arc(x,y,0.5,0,Math.PI*2,false);
            }            

            ctx.closePath();
            ctx.fill();
        }
    };

    // 画数字
    this.paintNumbers=function(ctx){
        ctx.font="bold 16px 宋体";
        ctx.fillStyle="Red";        

        ctx.fillText("XII",-12,-80);
        ctx.fillText("VI",-8,93);
        ctx.fillText("IX",-94,5);
        ctx.fillText("III",68,5);
    };

    // 画指针
    this.paintPointers=function(ctx){
        var date = new Date();
        var hour=date.getHours();
        var minute=date.getMinutes();
        var second=date.getSeconds();

        ctx.font="bold 6px 宋体";
        ctx.fillStyle="navy";
        ctx.fillText(hour+":"+minute+":"+second,12,-50);

        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/clock.rar

HTML5 Canvas 画钟表的更多相关文章

  1. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  2. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  3. html5 canvas画饼

    1. [图片] lxdpie.jpg ​2. [文件] lqdpie.html ~ 801B     下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  4. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  5. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. HTML5 Canvas画数字时钟

    先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好

  7. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  8. html5 canvas 画hello ketty

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. canvas 画钟表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. Andriod学习笔记3：Mac 平台下搭建 CLion 集成开发环境

    1. 安装Xcode 通过App store或者下载安装Xcode. 安装完成之后,最好启动一下Xcode,否则可能会报"Error:The C compiler "/usr/bi ...

  2. Android中各种Drawable总结

    在Android中,Drawable使用广泛,但是种类也多,基于<Android开发艺术探索>中对Drawable的讲解,总结了如下表格.

  3. Android自动化测试 - 自动化测试工具比较

  4. 12c Grid Infrastructure Management Repository &lpar;GIMR&rpar;

    1.什么是管理资料库(Management Repository) 管理资料库是12c中oracle clusterware管理的一个单实例数据库.对应的数据库名是MGMTDB.因为是一个单实例数据库 ...

  5. iphone在iframe页面的宽度不受父页面影响，避免撑开页面

    工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会. <di ...

  6. Python数据分析&lpar;二&rpar;&colon; Numpy技巧 &lpar;3&sol;4&rpar;

    numpy.pandas.matplotlib(+seaborn)是python数据分析/机器学习的基本工具. numpy的内容特别丰富,我这里只能介绍一下比较常见的方法和属性.   昨天晚上发了第一 ...

  7. 为什么Fourier分析？

    本文旨在给出Fourier分析的几个动机. 目录 波动方程 热导方程 Lapalce变换 求和公式 表示论 特征理论 参考资料 波动方程 考虑一维的波动方程最简单的边值问题$$u(x,t), x\in ...

  8. 【模板】字符串匹配的三种做法（Hash、KMP、STL）

    题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 输入输出格式 输入格式: 第一行为一个字符串,即为s1 第二行为一个字符串,即为s2 输出格式: 1行 ...

  9. error running git

    I ran xcode-select --install and everything worked for me.

  10. 详解设计模式之工厂模式&lpar;简单工厂&plus;工厂方法&plus;抽象工厂&rpar; v阅读目录

    1楼留头头大神:http://www.cnblogs.com/toutou/p/4899388.html   v阅读目录 v写在前面 v简单工厂模式 v工厂方法模式 v抽象工厂模式 v博客总结 v博客 ...

相关文章