把最近学到的一些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. c++ 普通高精除高精

    //codevs3118 高精度练习之除法 //打出了高精除高精,内心有点小激动. //还记得已开始学的时候非常难打 #include<cstdio>#include<cstring ...

  2. PHP IMAP收QQ邮件，SMTP存入另外QQ邮箱

    作用,将qq1收到邮件,用qq2的账号.以qq0的为发件人身份放到qq2的邮箱. 什么样做这样一个功能,一个朋友要求的,她不告诉我为什么,好吧 <?php define('USER','xxx@ ...

  3. zoj2132-The Most Frequent Number

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2132 The Most Frequent Number Time Limi ...

  4. Android Phonebook编写联系人UI加载及联系人保存流程（一）

    2014-01-06 17:05:11 将百度空间里的东西移过来. 本文适合ROM定制做Phonebook的童鞋看,其他人飘过即可- Phonebook添加/编辑联系人UI加载及保存联系人流程,是一系 ...

  5. Python中的sorted函数以及operator.itemgetter函数 【转载】

    operator.itemgetter函数operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),下面看例子. a = [1,2 ...

  6. Java中的深拷贝和浅拷贝

    1．浅拷贝与深拷贝概念 (1)浅拷贝(浅克隆) 浅拷贝又叫浅复制,将对象中的所有字段复制到新的对象(副本)中.其中,值类型字段(java中8中原始类型)的值被复制到副本中后,在副本中的修改不会影响到源 ...

  7. Android TextView多行垂直滚动

    在Android应用中,有时候需要TextView可以垂直滚动,今天我就介绍一下怎么实现的.在布局里: <TextView android:id="@+id/tvCWJ" a ...

  8. 获取hadoop的源码和通过eclipse关联hadoop的源码

    一.获取hadoop的源码 首先通过官网下载hadoop-2.5.2-src.tar.gz的软件包,下载好之后解压发现出现了一些错误,无法解压缩, 因此有部分源码我们无法解压 ,因此在这里我讲述一下如 ...

  9. 《JAVA学习笔记（1---13-4）》

    [1]问题: 1.什么叫做面向过程? 2.什么叫做面向对象? 解答: 1: 所谓的面向过程就是我们是一个执行者,我们要开发一个项目,这个项目要求要实现很多功能,作为执行者的我们就需要 去一个一个的找这 ...

  10. java互斥方法

    synchronized,  lock/unlock,  volatile类型变量, atom类, 同步集合,  新类库中的构件: CountDownLatch\CyclicBarric\Semaph ...