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

有没有什么调试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. Sublime 保存时自动转换tab成空格

    笔者最近学习c, c语言的清新代码风格让人眼前一亮,不禁爱上这种写作风格,变量名.等号.常量值之间空格分隔,清爽便于阅读. 于是笔者以此为代码写作规范,查阅自己以前写的java代码,以下用notepa ...

  2. OpenFileDialog - 设置 - Filter 笔记

    using (OpenFileDialog fileSelectDialog = new OpenFileDialog()) { fileSelectDialog.Multiselect = fals ...

  3. js判断访问终端

    //判断访问终端 var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; ...

  4. 解决: Can’t connect to local MySQL server through socket /var/lib/mysql/mysql.sock

    今天在搬瓦工上使用mysql 命令行,总报一个这样的错:Can't connect to local MySQL server through socket '/xxxxx/mysql.sock',一 ...

  5. DataTable与List互换

    public static class List2DataTable { #region "Convert Generic List to DataTable" /// <s ...

  6. C/C++中各种类型int、long、double、char表示范围（最大最小值）（转）

    #include<iostream> #include<string> #include <limits> using namespace std; int mai ...

  7. [转]Oracle数据泵的使用

    使用数据泵导出数据 1.连接Oracle数据库SQL> conn / as sysdba已连接. 2.创建一个操作目录SQL> create directory dump_dir as ' ...

  8. TypeScript 0.9.1 发布，新增 typeof 关键字

    TypeScript 0.9.1 发布了,该版本提升了编译器和语言的性能,增加新的语言特性 typeof ,更好的 this 处理等.详细介绍请看发行说明. TypeScript 是微软新推出的一种语 ...

  9. 个性二维码开源专题<介绍篇>

    由C#编写的个性二维码底层,已应用到 码晒客/疯狂创意二维码等项目上,并获得多项软件著作专利. 疯狂创意二维码 疯狂创意二维码是可用于生成风格独特的个性化二维码生成器,用户可以将目标信息输入到二维码生 ...

  10. Web程序的桌面提醒

    做web开发常会面对的一个问题是,浏览器最小化的时候如何才能向用户发送通知.解决办法大概有三种:让用户有事没事儿搂两眼页面:开发一个桌面客户端:Html5的Notification API. 目前没看 ...