canvas之特丑时钟

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

有没有什么调试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的学习就是坐标的不断确认的，然后连成线

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

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

转载于:https://www.cnblogs.com/zhangzhicheng/p/5770476.html

canvas之特丑时钟相关推荐

canvas绘制精细走动时钟
这里简单了利用canvas做了一个时钟,能够实现分针和时针较精确的走动,没有太多难点,重点的是要实现分针和时针走动,角度的计算,笔者在下面进行说明.先看效果图: 颜色单配的比较难看,读者谅解.请看代码 ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
html5 canvas 画的简易时钟
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
android canvas 画按钮,Android 用Canvas轻松绘制一个时钟
接下来这篇文章主要是结束如何轻松自定义一个View并使用Canvas绘制一个时钟的案例,话不多说先上图瞅瞅,一共实现了两种效果,一种是秒动(秒针一秒走一针).另一种是连动式的,秒针不会停会一直走动,话 ...
canvas简单实现动态时钟
使用到的知识: 1. 获取系统时间 2. 画图形,空心图形,实心图形,以及一些属性 3. for循环准备工作:添加一块画布1000*1000(随意),引用canvas.js ...
使用Canvas HTML5画出时钟
什么是canvas canvas 是html5 新增的一个利用js脚本绘制位图的标签,canvas 标签作为画布,本身不具有绘图的能力,而是依赖其对应的上下文对象[利用getContext()方法取得 ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
html5绘制时钟刻度,html5 canvas 画的简易时钟
时钟 //开始之前必须懂得时针各指针的弧度计算公式. var canvas,context; function window_onload(){ canvas = document.getElemen ...

canvas之特丑时钟

canvas之特丑时钟相关推荐

最新文章

热门文章