把最近学到的一些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. CodeForces 441E(Codeforces Round #252 (Div. 2))

    思路:dp[i][now][mark][len]   i 表示当前第i 次now存的是后8位,mark为第9位为0还是1 len第九位往高位还有几位和第9位相等.  只存后8位的原因:操作只有200次 ...

  2. Android事件处理--读书笔记

    2013-12-28 17:57:17 1. Android提供了两种方式的事件处理:基于回调和基于监听的事件处理: 1.1 对基于监听的事件处理而言,主要做法是为Android界面组件绑定特定的事件 ...

  3. EntLib Unity父类的依赖注入问题

    Unity的注入有3种方式:构造函数.[Dependency]属性.[InjectionMethod]方法.这3种方式涉及到的interface或class都会去Registrations里找,找不到 ...

  4. PS通道抠图总结

    看了那么多的通道抠图,总结几点就是 1.你要有很强的色彩意识,怎样调节对比色等才能增加主体和背景的色差 2.流水步骤 Ctrl+J复制背景图层 调整主体和背景的色差 进入通道面板,找到主体和背景对比最 ...

  5. Hadoop 重启各个节点

    对于datanode可以在master中配置,然后在maste启动的时候,一并去启动这些节点 .对于死掉的节点,也可以通过以下命令启动 .重启挂掉的节点进入到 挂掉的机器 bin/hadoop-dae ...

  6. MicroPython开发板TPYBoard关于USB-HID的应用

    USB-HID是Human Interface Device的缩写,属于人机交互操作的设备,如USB鼠标,USB键盘,USB游戏操纵杆,USB触摸板,USB轨迹球.电话拨号设备.VCR遥控等等设备. ...

  7. php的字符串处理

    字符串处理: strlen("aaa");取字符串的长度 *** strcmp("aaa","aaa");比较两个字符串,相同的话输出0,不 ...

  8. oracle中的cluster表

    大家对通常oracle中的cluster的理解是不准确的,经常和sql server中的cluster index混淆.Cluster是存储一组table的一种方法,这些table共享同一数据块中的某 ...

  9. Linux----七个有效的文本编辑习惯

    如果你要花大量的时间键入文本, 写程序或编写HTML脚本, 你可以通过有效地使用一个好的编辑器来替你节省时间. 本文将引导你如果快速地完成你的编辑工作, 并且减少你的错误. 本文将以开放源码软件Vim ...

  10. Linux环境给文件重命名

    Linux环境给文件重命名时,如果重命名后的文件名称与当前路径下已存在的文件名称相同,则重命名的文件会覆盖相同名称的文件内容: 例如:新建文件testfile1,内容为mytest: 新建文件test ...