把最近学到的一些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#点击按钮用DataGridView动态增加行、删除行，增加按钮列

    原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

  2. JavaScript自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基于MVC的应用框架之Struts前奏

    1.JSP&Servlet中的MVC MVC的关键是,业务逻辑要与表示分离.通过把业务逻辑放在一个“模型”中,这样业务逻辑本身就能作为一个可重用的JAVA类存在. 在JSP&Servl ...

  4. obj.offsetHeight与obj.style.height区别

    我们都知道obj.offsetHeight与obj.style.height都可以获取obj的高度,但是在js使用中,我们通常会使用前者来获取高度,这是为什么,二者有什么样的区别呢. 1.obj.of ...

  5. CCNA 6.5

    no sh (no shutdown : start the interface)   router rspf 1 network x.x.x.x x.x.x.x area 0 int (interf ...

  6. C/C++文件结构

    总结者:kate (1).h 为头文件:存放 版权和版本声明,预处理块 ,函数和类结构声明 (2).cpp文件:代码文件,存放程序的实现 大都数时候,源文件和头文件是对应出现的,比如有一个A.cpp  ...

  7. 传Windows 9预览版今秋发布

    据ZDNet长期关注微软动态的资深人士玛丽•乔•弗利(Mary Jo Foley)称,Windows 9预览版将会在9月或者10月推出.按照这一进度,代号为“Threshold’”的Windows 9 ...

  8. ios上传应用后，审核流程完成前（reveiw）修改了程序内容，如何上传替换

    其实挺简单,只需要更改下version和build版本 看图说话就可以.我的程序之前版的版本设置 修改bug之后的设置: 然后重新打包就好了,提示打包成功后,在itunesconnect查看发现 选中 ...

  9. hadoop生态系统的详细介绍

    1.Hadoop生态系统概况 Hadoop是一个能够对大量数据进行分布式处理的软件框架.具有可靠.高效.可伸缩的特点. Hadoop的核心是HDFS和MapReduce,hadoop2.0还包括YAR ...

  10. js库之art.dialog

    自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...