Canvas圆形时钟

今天带来一个圆形时钟，用JQ编写的Canvas 代码。Canvas 的神奇之处就在于，可以自行绘制图片不需要外部引入，当你深入了解这项技术的时候，你也会忍不住赞叹他的神奇之处。

虽然我一再强调，自学也是人生的一门必修课。但哪怕我接连几天不眠不休写出了 Canvas 教程，大家还是置若罔闻，要求我在代码中写下详细注释。从我的角度来讲：不写注释可以减少代码量，大批量的注释会显得十分冗余，我出的 Canvas 教程如果大家认真阅读、练习的话，读懂这些代码不成问题。就好像对着官方文档我可以手写JQuery，可离了官方文档我就是个弟弟。很多时候能看懂不一定能默写，我们要学习的是方法和思路。
这一篇Canvas动画里有非常详细注释，谨以此来慰问诸君对我的青睐，感谢！

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas圆形时钟</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<style type="text/css">#myCanvas {opacity: 0.8;-webkit-animation: roll 3s;animation: roll 3s;}@-webkit-keyframes roll {from{-webkit-transform:rotate(360deg);opacity:0;}to{-webkit-transform:rotate(0deg);opacity:0.8;}       }@keyframes roll {from{transform:rotate(360deg);opacity:0;}to{transform:rotate(0deg);opacity:0.8;}     }
</style>
</head>
<body>
<div style="width:150px;margin:150px auto;"><canvas id="myCanvas" width="150" height="150"></canvas>
</div><!-- 时钟悬浮网页游动 -->
<!-- <script>
var x = 50,y = 60;//图片距离顶部的位置
var xin = true, yin = true
var step = 1  //图片移动的步速 越高越快
var delay = 10 //图片移动延时 越高越慢
var obj=document.getElementById("myCanvas")
function float() {
var L=T=0
var R= document.documentElement.clientWidth-obj.offsetWidth //offsetHeight 则是网页内容实际高度
var B = document.documentElement.clientHeight-obj.offsetHeight // clientHeight 就是透过浏览器看内容的这个区域高度。
obj.style.left = x + document.documentElement.scrollLeft + "px";
obj.style.top = y + document.documentElement.scrollTop + "px";
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.οnmοuseοver=function(){clearInterval(itl)}
obj.οnmοuseοut=function(){itl=setInterval("float()", delay)}
</script> --></body>
<script>
$(function(){var iNow = 0;var arr = ["#ffae00","black"];myClock();myday();setInterval(myClock,1000);//每一秒钟重绘一次    setInterval(myday,1000);function myday(){var a = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");var week = new Date().getDay();var dateDom=new Date();var year=dateDom.getFullYear();var month=dateDom.getMonth()+1;var day=dateDom.getDate();var mm=year+"-"+month+"-"+day;var myCanvas = document.getElementById("myCanvas");var cxt=myCanvas.getContext("2d");cxt.font="14px 黑体";//绘制实心字cxt.fillStyle="red";//填充红色cxt.fillText(mm,50,105);for(var ind=0;ind<6;ind++){if(week==ind){var myCanvas = document.getElementById("myCanvas");var cxt=myCanvas.getContext("2d");cxt.font="14px 黑体";//绘制实心字cxt.strokeStyle="red";//填充红色cxt.strokeText(a[ind],55,55);}}
}function myClock(){    //得到年月日var myCanvas = document.getElementById("myCanvas");       var oC = myCanvas.getContext("2d");//得到时分秒var now = new Date(),sec = now.getSeconds(),min = now.getMinutes(),hour = now.getHours();hour = hour>=12 ? hour-12 : hour;iNow++;iNow = iNow%2;        oC.save();//save():保存当前环境的状态//初始化画布oC.clearRect(0,0,myCanvas.width,myCanvas.height);//clearRect:在给定的矩形内清除指定的像素 oC.translate(75,75);//translate:重新映射画布上的 (0,0) 位置oC.scale(0.5,0.5);//scale:缩放当前绘图至更大或更小oC.rotate(-Math.PI/2);//rotate:旋转当前绘图//  Math.PI: PI 属性就是 π，即圆的周长和它的直径之比//白色背景oC.save();oC.fillStyle = "#ccc";oC.beginPath();//beginPath:起始一条路径，或重置当前路径oC.arc(0,0,14+0,0,Math.PI*2,true);//arc:创建弧/曲线（用于创建圆形或部分圆）oC.fill();//fill:填充当前绘图（路径）oC.restore();//restore:返回之前保存过的路径状态和属性oC.strokeStyle = "#548B54";//strokeStyle:设置或返回用于笔触的颜色、渐变或模式oC.fillStyle = "black";//fillStyle:设置或返回用于填充绘画的颜色、渐变或模式oC.lineWidth = 4;//设置或返回当前的线条宽度oC.lineCap = "round";  //设置或返回线条的结束端点样式        //时针刻度oC.save();oC.beginPath();for(var i=0; i<12; i++){   oC.moveTo(110,0);//把路径移动到画布中的指定点，不创建线条oC.lineTo(120,0);//添加一个新点，然后在画布中创建从该点到最后指定点的线条oC.rotate(Math.PI/6);//旋转当前绘图}oC.stroke();//绘制已定义的路径oC.restore();//分针刻度oC.save();oC.fillStyle = "black";oC.lineWidth = 2;oC.beginPath();for(var i=0; i<60; i++){if(i%5 != 0){oC.moveTo(116,0);oC.lineTo(120,0);}oC.rotate(Math.PI/30);}oC.stroke();oC.restore();           oC.save();oC.rotate(Math.PI/2);oC.font = "30px impact";//12点oC.fillText("12",-15,-80); oC.fillText("1",40,-75);  //文本的 x 坐标位置,文本的 y 坐标位置     oC.fillText("2",80,-35);      //3点oC.fillText("3",88,13);                   //6点oC.fillText("6",-8,104);              //9点oC.fillText("9",-103,11);                 oC.restore();//画时针oC.save();oC.strokeStyle = "#ff3300";oC.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);  oC.lineWidth = 8;oC.beginPath();oC.moveTo(-20,0);oC.lineTo(60,0);oC.stroke();oC.restore();//画分针oC.save();oC.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);oC.strokeStyle = "#27A9E3";oC.lineWidth = 6;oC.beginPath();oC.moveTo(-28,0);oC.lineTo(90,0);oC.stroke();oC.restore();//画秒针/*oC.save();oC.rotate(sec*Math.PI/30);oC.strokeStyle = "#D40000";oC.lineWidth = 3;oC.beginPath();oC.moveTo(-30,0);oC.lineTo(105,0);oC.stroke();oC.restore();*///风车秒针oC.save();oC.rotate(sec*Math.PI/30);                oC.save();                  oC.fillStyle = "#f23";oC.beginPath();oC.arc(94,0,10,0,Math.PI,true);oC.fill();oC.restore();oC.save();oC.rotate(Math.PI/2);oC.fillStyle = "#ffae00";oC.beginPath();oC.arc(10,-84,10,0,Math.PI,true);               oC.fill();oC.restore();oC.save();oC.fillStyle = "#27A9E3";oC.beginPath();oC.arc(74,0,10,Math.PI,Math.PI*2,true);oC.fill();oC.restore();oC.save();oC.rotate(Math.PI/2);oC.fillStyle = "#0eaf52";oC.beginPath();oC.arc(-10,-84,10,Math.PI,Math.PI*2,true);oC.fill();oC.restore();oC.restore()//风车秒针//表框oC.save();oC.lineCap = "butt";oC.lineWidth = 16;//调整边框样式oC.save();               oC.strokeStyle = "#BBFFFF";oC.beginPath();oC.arc(0,0,142,0,Math.PI*2,true);oC.stroke();oC.restore();oC.save();oC.strokeStyle = "#C0FF3E";oC.beginPath();oC.arc(0,0,142,0,Math.PI/iNow*5/3,true);oC.stroke();oC.restore();oC.restore();//中心点oC.save();oC.fillStyle = "#fff";oC.beginPath();oC.arc(0,0,4,0,Math.PI*2,true);oC.fill();oC.restore();oC.restore();};
});
</script>
</html>

如果你不满足于简单的阅读和摘录，请从我的 Canvas 分栏中寻找基础教程，自学也是人生的一门必修课，感谢你们陪伴至今，我为自己的零注释行为感动惭愧。

微信扫码，掌上阅读Canvas 教程，走到哪里学到哪里

特别推荐：
JQ俄罗斯方块
Canvas点线相交
激流勇进V3.0
游动的花花肠子
阿波罗的轻语

Canvas圆形时钟相关推荐

php 显示时间动态效果,使用h5 canvas实现时钟的动态效果
canvas 绘制好时钟界面,使用定时器定时重绘整个canvas,就实现了仿真动态时钟的效果. 难点在于:秒钟刻度和时钟刻度的绘制整点文字沿着内边圆形环绕其中刻度的环绕并不难计算,文字的环绕就比较 ...
js的计时事件. 圆形时钟
js的计时事件. 圆形时钟你的魔鬼人间仙子. 又来喽效果图代码 <!DOCTYPE html> <html> <head><meta charset=& ...
android 自定义时钟,Android自定义控件之圆形时钟（续）
在上篇文章中,我向大家介绍了如何通过自定义View一步步画出一个漂亮的圆形时钟.如果你还没看的话,我不建议你接着往下看,因为这篇文章是接着上篇的文章,如果直接看的话可能会不知所云,所以还是建议你先看一 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...

Canvas圆形时钟

Canvas圆形时钟相关推荐

最新文章

热门文章