把最近学到的一些canvas技能全部发上来，刚开始写博客，感觉还不太习惯，不过我相信慢慢就会习惯了。不啰嗦了，把代码送上，看不懂的话可以先去学习下基础教程，把基础学好了也就能看懂了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" width="500" height="500">你的浏览器不支持canvas</canvas>

    <script>

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        function clock(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        var date = new Date();

        var s = date.getSeconds();

        var m = date.getMinutes();

        var h = date.getHours();

        var r = canvas.width/2.5;  //半径

        ctx.save();

        ctx.translate(250,250);//平移之后坐标系跟着变化

        ctx.rotate(-Math.PI/2);//旋转之后坐标系跟着变化

        ctx.save();// 记录旋转画布之前初始状态

        ctx.lineWidth = 3;

        ctx.strokeStyle = "#CCCCCC";

        //分刻度

        for(var i = 0;i < 60;i++ ){

            ctx.beginPath();

            ctx.rotate(Math.PI/30);

            ctx.moveTo(165,0);

            ctx.lineTo(180,0);

            ctx.stroke();

        }

        ctx.restore();// 恢复初始状态，未旋转前

        ctx.save();

        ctx.lineWidth = 5;

        ctx.strokeStyle="black";

        //时刻度

        for (var i = 0; i < 12; i++) {

            ctx.beginPath();

            ctx.rotate(Math.PI/6);// 旋转画布绘制刻度

            ctx.moveTo(155,0);

            ctx.lineTo(180,0);

            ctx.stroke();

        }

        ctx.restore();

        ctx.save();

        //秒针

        ctx.strokeStyle = "blue";

        ctx.lineWidth = 2;

        ctx.beginPath();

        ctx.rotate(s*Math.PI/30);

        ctx.moveTo(-40,0);

        ctx.lineTo(170,0);

        ctx.stroke();

        ctx.restore();

        ctx.save();

        //分针

        ctx.strokeStyle = "black";

        ctx.lineWidth = 3;

        ctx.beginPath();

        ctx.rotate((m*Math.PI/30) + (s*Math.PI/1800));

        ctx.moveTo(-30,0);

        ctx.lineTo(160,0);

        ctx.stroke();

        ctx.restore();

        ctx.save();

        //时针

        ctx.strokeStyle = "red";

        ctx.lineWidth = 4;

        ctx.beginPath();

        ctx.rotate((h*Math.PI/6)+(m*Math.PI/360) + (s*Math.PI/21600));

        ctx.moveTo(-10,0);

        ctx.lineTo(150,0);

        ctx.stroke();

        ctx.restore();

        ctx.beginPath();

        ctx.arc(0,0,5,0,360,false);

        ctx.closePath();

        ctx.fillStyle = "#ebebeb";

        ctx.fill();

        ctx.stroke();

        ctx.restore();

        //添加数字

        for(i = 0;i<12;i++){

            angle = i * 30;

            // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位

            angle = angle*Math.PI/180;;

            font = (i + 3 > 12)?i+3-12 : i+3;

            fontX = 244+Math.round(Math.cos(angle)*(r-60));

            fontY = 256+Math.round(Math.sin(angle)*(r-60));

            ctx.font = 'bold 14px 微软雅黑';

            ctx.fillText(font+'',fontX,fontY);

        }

        ctx.restore();

        window.requestAnimationFrame(clock);

        //外圆框

        ctx.lineWidth=4;

        ctx.strokeStyle="gray";

        ctx.beginPath();

        ctx.arc(250,250,r,0,Math.PI*2,true);

        ctx.stroke();

        ctx.restore();

        ctx.restore();

        }

        window.requestAnimationFrame(clock);

        clock ();

    </script>

</body>

</html>

效果图：

canvas-绘制时钟的更多相关文章

  1. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  2. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  3. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  4. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  5. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  6. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  7. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  8. 使用canvas绘制时钟 （http://heeroluo.net/Article/Detail/95）

    准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></di ...

  9. canvas绘制时钟及注释及save和restore的用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. Countries in War (POJ 3114) Tarjan缩点+最短路

    题目大意: 在一个有向图中,每两点间通信需要一定的时间,但同一个强连通分量里传递信息不用时间,给两点u,v求他们最小的通信时间.   解题过程: 1.首先把强连通分量缩点,然后遍历每一条边来更新两个强 ...

  2. Rhel6-集群管理（luci&&ricci）配置文档

    理论基础: User → HA →     Lb    → web → sql → 分布式filesystem ->磁盘I/O 用户   高可用 负载均衡    应用   数据库      mf ...

  3. Codeforces Round #326 (Div. 2)-Duff in Love

    题意: 一个数x被定义为lovely number需要满足这样的条件:不存在一个数a(a>1),使得a的完全平方是x的因子(即x % a2  != 0). 给你一个数n,求出n的因子中为love ...

  4. how to reset mac root password

    Reset 10.5 Leopard & 10.6 Snow Leopard password Power on or restart your Mac. At the chime (or g ...

  5. Git的常用命令的使用方法和解释

    我们常用的git命令: add        Add file contents to the index(将文件添加到暂存区)  用法: 保存某个文件到暂缓区:git add 文件名 保存当前路径的 ...

  6. IOS文件管理-NSFileMangager-NSdata

    Ios下的文件管理, Ios下不像windows 文件系统那样可以访问任何的文件目录,如C盘.D盘什么的.在Ios中每个应用程序只能访问当前程序的目录,也即sandbox(沙盒模型). iOS为每个应 ...

  7. mac终端下运行shell脚本

    最近公司要弄关于IOS下自动化打包的东西,研究了用命令行的形式来代替手工的方式来处理.即: 用xcodebuild 和xcrun  语法来进行脚本实现.    但由于语法的结构够了,另一个问题产生了, ...

  8. php大力力 [027节] 被百度收录较好的几个视频网站示例

    php大力力 [027节] 被百度收录较好的几个视频网站示例 56网 很清晰 :2014 兄弟连高洛峰 PHP教程14.1.7 在PHP脚本中操作MySQL数据库4_视频在线观看 - 56.com 土 ...

  9. FR #1题解

    A. 建图跑最小费用最大流.分类讨论每种情况如何连边,费用怎么定. #include<iostream> #include<cstdio> #include<cstrin ...

  10. Linux命令（1）-创建文件

    版本:centos7 1.可以使用cat创建一个新的文件 命令:cat>>filename 使用cat创建文件时,以系统默认的文件属性作为新文件的属性,并接受键盘输入作为文件的内容.输入结 ...