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

有没有什么调试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. 使用 python 操作 redis

    1.安装pyredis (1)使用 # easy_install redis (2)直接编译安装 #wget https://pypi.python.org/packages/source/r/red ...

  2. hibernate进行多表联合查询

    hibernate是按照hql语句来进行查询的, 里面所使用的表名, 其实是实体类的名字, hql语句的写法并没有多大差别, 是在返回结果的时候要稍微做一些处理 //使用hibernate进行多表查询 ...

  3. android中如何发送及接收数据(两种方法)？

    1.如在MainActivity.java中的按钮点击时设置: //发送数据方法1--简单型 i.putExtra("txt", "没错,我就是刚传来的信息!" ...

  4. socket方法

    // 创建一个Socket实例var socket = new WebSocket('ws://192.168.2.72:8430'); // 打开Socket socket.onopen = fun ...

  5. Spring 4 官方文档学习（十一）Web MVC 框架之编码式Servlet容器初始化

    在Servlet 3.0+ 环境中,你可以编码式配置Servlet容器,用来代替或者结合 web.xml文件.下面是注册DispatcherServlet : import org.springfra ...

  6. Web大规模高并发请求和抢购的解决方案

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  7. 使用事件等待句柄EventWaitHandler 实现生产者、消费者队列

    using System; using System.Threading; using System.Collections.Generic; class ProducerConsumerQueue ...

  8. Android学习--摘录

    今天准备开始毕业设计--做一个android应用.无奈android基础木有一点,以前做过一个蓝牙应用,不过对android各方面的知识还是不懂啊,今天在android主页上看英文的android开发 ...

  9. Class类的理解

      在java中,每个类都有一个相应的Class类的对象,因为每个类编译完成后,在生成的.class文件中,就会产生一个Class对象.     在运行期间,如果我们要产生某个类的对象,jvm会检查类 ...

  10. MySql自动分区

    自动分区需要开启MySql中的事件调度器,可以通过如下命令查看是否开启了调度器 show variables like '%scheduler%'; 如果没开启的话通过如下指令开启 ; 1.创建一个分 ...