感觉是不是特想送钟，老是编写些时钟的效果，今日就发个丑丑的时钟，老实说

有没有什么调试canvas的工具，老是要在浏览器刷新查看效果，好累啊~

（┬＿┬）

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            background: #eee;

        }

        canvas{

            background: #fff;

        }

    </style>

</head>

<body>

    <canvas width="800" height="800">你浏览器不支持，请升级...</canvas>

    <audio id="audio" src="1.wav"></audio>

    <script>

        var oAudio=document.getElementById("audio");

        var oCas=document.getElementsByTagName("canvas")[0];

        var cas=oCas.getContext("2d");

        oAudio.ontimeupdate=function(){

            if(oAudio.currentTime>0.1){

                this.pause();

            }

        }

        /*渐变颜色*/

        var color=cas.createRadialGradient(400,400,10,400,400,200);

            color.addColorStop(0,"#f1f4f5");

            color.addColorStop(1,"#c5c6c7");

        setInterval(function(){

        oAudio.currentTime=0;

        oAudio.play();

        cas.clearRect(0,0,800,800);

        /*画圆框*/

        cas.lineWidth=3;

        cas.shadowColor="#888";

        cas.shadowOffsetX=1;

        cas.shadowOddsetY=1;

        cas.shadowBlur=5;

        cas.arc(400,400,200,0,Math.PI*2,false);

        cas.strokeStyle=color;

        cas.stroke(); 

        /*画圆内*/

        cas.fillStyle=color;

        cas.fill();

        /*画时刻*/

        drawTime();

        function drawTime(){

            var len=8;

            var len1=16;

            cas.strokeStyle="#7f7f7f";

            cas.shadowOffsetX=0;

            cas.shadowOddsetY=0;

            cas.shadowBlur=0;

            cas.beginPath();

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

                if(i%5==0){

                cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);

                cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180));

                }else{

                cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);

                cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180));

                }

            }

            cas.stroke();

        }

        /*画时针*/

        var date=new Date();

        var h=date.getHours();

        var m=date.getMinutes();

        var s=date.getSeconds();

            /*时针*/

        needle(h*5+5*m/60,100,"#579ec5");

        /*分针*/

        needle(m,130,"#5e717c");

        /*秒针*/

        needle(s,150,"#1d1e1e");

        /*圆的中心点*/

        cas.fillStyle="#858384";

        cas.beginPath();

        cas.arc(400,400,5,0,2*Math.PI,true);

        cas.shadowOffsetX=1;

        cas.shadowOddsetY=1;

        cas.shadowBlur=5;

        cas.fill();

        },1000);

        /*时针的函数*/

        function needle(t,len,color){

            var angle=Math.PI/180;

            cas.beginPath();

            cas.strokeStyle=color;

            cas.moveTo(400,400);

            cas.lineTo(400+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle));

            cas.stroke();

        }

    </script>

</body>

</html>

这个钟重点不在怎么画，在三角函数，三角函数的使用与角度息息相关，Math.PI是π，Math.sin(),Math.cos()它们都是接受弧度的，所以要

把角度转换成弧度，在画钟前要先判断时钟的条件，把圆分成60份，每一份代表一个刻度，还有在圆的坐标是数学里的正方向为准的，所以

需要把开始坐标调一下，减个90度就可以和时钟的开始位置一样了。

在学canvas前一定要把以前遗忘的数学函数复习复习一下，不是一些复杂的算数就无法做了，canvas的学习就是坐标的不断确认的，然后连成线

最后画成图，这与数学里的点到线，线到面一样的道理。

上面的代码不难都是使用线条画的，就是重复的使用画线函数和填充颜色。噢~还有外加了一个声频标签使用，达到时钟的声音    滴答滴答滴答~

canvas之特丑时钟的更多相关文章

  1. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  2. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

  3. 用canvas的arc绘制时钟

    在页面上加入canvas标签: <body> <canvas id="c1" width="600px" height="600px ...

  4. Canvas画布实现自定义时钟效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. canvas的认识，时钟的设置

    canvas的三要素:ID标识,width宽度,height高度,他是行元素 IE9才支持canvas,canvas是一个透明的画板,要用js去画 绘制一个圆 线性渐变颜色 径向渐变 图片的绘制: 视 ...

  6. 公告栏添加时钟——利用canvas画出一个时钟

    前言 最近在学习HTML5标签,学到Canvas,觉得很有趣.便在慕课网找了个demo练手.就是Canvas时钟. 对于canvas,w3shcool上是这么描述的: HTML5 <canvas ...

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

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

  8. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. canvas基础绘制-绚丽时钟

    效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...

随机推荐

  1. redis学习（二） Redis Hash

    Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). redis ...

  2. HttpURLConnection请求网络数据的Post请求

    //--------全局变量----------- //注册Url    private String urlPath="http://101.200.142.201:8080/VideoP ...

  3. 咏南IOCP REST中间件

    咏南IOCP REST中间件 让DELPHI7也能编写REST服务. 使用IOCP通信+UNIDAC数据库引擎. 客户端跨开发语言调用.

  4. Spring学习笔记 Part.01

    Hibernate的作用: 1.可以解决以面向对象的方式操作数据库的问题 请求参数(String)→Strut2→Action(对象)→业务逻辑组件(面向对象) 2.所以任何一个ORM框架都可以代替H ...

  5. ZOJ2532_Internship

    一个单源多汇的有向图,求增大那些边的容量可以使得网络的最大流增加. 很简单,直接跑最大流,保留残余网络,然后枚举所有余量为0的边,使其容量增加一个1,看看是否出现新的增广路即可. 召唤代码君: #in ...

  6. 最短路算法 (bellman-Ford算法)

    贝尔曼-福特算法与迪科斯彻算法类似,都以松弛操作为基础,即估计的最短路径值渐渐地被更加准确的值替代,直至得到最优解.在两个算法中,计算时每个边之间的估计距离值都比真实值大,并且被新找到路径的最小长度替 ...

  7. C++字符串常量

    C++字符串常量 当一个字符串常量出现于表达式中时,它的值是个指针常量.编译器把这个指定字符的一份copy存储在内存的某个位置(全局区),并存储一个指向第一个字符的指针. #include <i ...

  8. 备份数据库的时候设置 BufferCount 选项不正确导致 out of memory 的情况

    备份数据库的时候设置 BufferCount 选项不正确导致 out of memory 的情况 今天群里面的东辉兄跟我说备份生产数据库的时候报错 环境: 32位的SQLSERVER2008 机器有1 ...

  9. elixir 高可用系列（三） GenEvent

    概述 GenEvent 是事件处理的通用部分的抽象. 通过 GenEvent ,我们给已有的服务 动态 的添加 事件处理. GenEevent 和 GenServer 的区别 之前已经介绍了 GenS ...

  10. 控制反转（Inversion of Control）之我的理解

    关于控制反转(Inversion of Control),在具体实现上也有许多其它的叫法,如依赖倒置(Dependency Inversion Principles, DIP).依赖注入(Depend ...