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

有没有什么调试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. H5-杂七杂八的标签

    1.overflow:设置当内容超出父级的宽高尺寸设置时的处理方式 a.hidden:隐藏超出部分的内容 b.auto:如果内容没有超出,就正常显示,如果超出,就隐藏内容并提供滚动条,可以滚动显示超出 ...

  2. css 单位－px、em、rem、百分比

    px像素(Pixel,像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于父级元素字体尺寸(若父级元素未指定f ...

  3. Python.resource-for-python-from-internet

    1. pyvideo Python related video indexed so you can find it. http://pyvideo.org/ 2. 6 Useful Python L ...

  4. 20145318赵一Java课程总结

    20145318赵一Java课程总结 每周读书笔记链接汇总 问卷调查 第1周读书笔记 第2周读书笔记 第3周读书笔记 第4周读书笔记 第5周读书笔记 第6周读书笔记 第7周读书笔记 第8周读书笔记 第 ...

  5. kenrnel 驱动中常用的宏

    http://blog.csdn.net/uruita/article/details/7263290 1. MODULE_DEVICE_TABLE (usb, skel_table);该宏生成一个名 ...

  6. php 消息实时推送（反ajax推送）

    入口文件index.html <!DOCTYPE HTML> <html> <head> <title>反ajax推送</title> &l ...

  7. 运行iis出现：The server has encountered an error while loading an application ……的解决办法【转】

    本人测试了下,第三种方法成功了. 然后经过网上搜索,3种解决方法: 第一种: MC检测到此管理单元发生一个错误.建议关闭并重新启动MMC 要变通解决此问题, 请按照下列步骤操作进入 WMI MMC 管 ...

  8. ASP.NET MVC 下拉框的传值的两种方式

    以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownL ...

  9. centos（Linux）系统阿里云ECS搭建 jdk，tomcat和MySQL环境，并部署web程序

    之前我对这个东西一无所知,攻击力为0,谢谢各个论坛上面的兄弟们的帮助. 过程: 首先ssh远程登陆: ssh root@你的公网ip ,输入密码 1,jdk我用的版本是jdk-7u80-linux-x ...

  10. javascript的原型与继承（2）

    这是上一篇的后续. Javascript是一种基于对象的语言,遇到的所有东西几乎都是对象.如果我们想要把属性和方法封装成一个对象,应该怎么做呢: 假设我们把猫看成一个对象: var Cat = { n ...