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

有没有什么调试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. Java 技术体系图

    Java 程序员 高级特性 反射.泛型.注释符.自动装箱和拆箱.枚举类.可变 参数.可变返回类型.增强循环.静态导入 核心编程 IO.多线程.实体类. 集合类.正则表达式. XML 和属性文件 图形编 ...

  2. Python学习笔记-Day5

    冒泡算法: 实现1: a = [,,,,,,,,,,,,,,] def bubble(badlist): sort = False while not sort: sort = True ): ]: ...

  3. SUSE Linux Enterprise Server 11 软件源

    1.添加软件源 zypper ar http://ftp5.gwdg.de/pub/opensuse/discontinued/distribution/11.4/repo/oss oss zyppe ...

  4. Nodejs编码转化问题

    目前Node.js仅支持hex.utf8.ascii.binary.base64.ucs2几种编码的转换.对于GBK,GB2312等编码,Nodejs自带的toString()方法不支持,因此中文转化 ...

  5. 【java】：定时任务

    PS:转 http://blog.csdn.net/lotusyangjun/article/details/6450421/

  6. <大学祭>

    我将20岁青涩的身影留在教室前的花坛边,远赴他乡,这些年过去了,他总是对我说别忘记我的梦: 我将那个沉静娇小的眼镜女孩印象留在第一排靠窗的座位,带着淡淡离愁而去,这些年过去了,她对我说,永恒的爱是心中 ...

  7. java8的接口新特性（可以有方法体的接口）(转)

    以前Java的接口中定义的方法不可以有方法体,这样试用起来,有时候听不方便的,当有多个类实现了想同的接口,接口中某一些方法的实现体可能都是一样的时候,这样无疑浪费了很多时间,在写重复的代码(或者说co ...

  8. Sudoku Solver Backtracking

    该博客好好分析 Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicat ...

  9. SQL语句中如何把文件以二进制数组形式存入数据库

    System.IO.FileStream fs = new FileStream("1.txt", FileMode.Open); string strConn = "D ...

  10. Windows下Qt5搭建Android开发环境笔记

    Windows很大的特点是配置使用几乎都可以图形化进行,和Linux比起来在很多时候配置环境也要方便很多.所以,搭建Qt for Andorid也是十分简单的.需要以下工具: 1.最方便的Qt官方包, ...