站长资源网络编程
js Canvas实现圆形时钟教程
简介阅读本文需要一点关于canvas基本用法的基础，本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程第一步：新建一个最简单的html文件，并且在标签中定义元素canvas。canvas.htmlCanvas clock tutoria</div>
<div class="news_infos"><div id="MyContent"><p>阅读本文需要一点关于canvas基本用法的基础，本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程</p>
<p><strong>第一步：</strong>新建一个最简单的html文件，并且在<body>标签中定义元素canvas。</p>
<p>canvas.html</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<html>
<head>
<title>Canvas clock tutorial</title>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
</html>
</pre>
</div>
<p> 在这一步完成后，用浏览器打开canvas.html，你会发现什么都看不到，这是因为我们没有在canvas上绘制任何东西，同时也没有为其定义边界。</p>
<p>在canvas .html中为<canvas>添加css样式属性：</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<html>
<head>
<title>Canvas clock tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
</html>
</pre>
</div>
<p>这样，我们就能看到<canvas>的轮廓。</p>
<p>当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。</p>
<p><strong>注意:</strong> 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。 </p>
<p>第二步：新建实现绘制圆形时钟逻辑的draw.js文件，进行初始化工作。</p>
<p>毫无疑问，要实现时钟，就需要获取系统时间。 <br>
</p>
<p>在js语法中，可以利用Date()来实时获取时间。<br>
var currentTime = new Date(); </p>
<p>随后，要掌握的是canvas绘制圆形的函数：<br>
arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法表示画一个以（x,y）为圆心的、以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认顺时针（true））来生成。<br>
其中stratAngle和endAngle的单位并不是我们所熟悉的角度单位，而是弧度单位。一个完整的圆跨弧度2π。 <br>
</p>
<p>在canvas的坐标系中，是以x轴正方向所在的方向为0弧度。时钟指针按顺时针方向转，以2π为一个周期，因此如下图所示，时钟指针，是从(-1/2)*π位置开始走的。 </p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016919170748988.jpg');"><img src="/UploadFiles/2021-04-02/2016919170748988.jpg" alt="js Canvas实现圆形时钟教程" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>当前时间的弧度计算方式如下：</p>
<div class="htmlcode">
<pre class="brush:js;">
//将一个时钟周期12等分，对12求余是因为Date().getHours将返回24小时制的小时。
hour = (currentTime.getHours() % 12 ) * (2 * Math.PI /12);
//MINUTE 一圈60等分
minute = (currentTIme.getMinutes) * (2* Math.PI / 60);
//SECOND 一圈60等分
second = (currentTime.getSeconds) * (2 * Math.PI / 60);
</pre>
</div>
<p>由于在canvas中时钟圆从(-1/2)*π开始走，因此我们还需要给它们加上(-1/2)*π的起始偏移量。</p>
<p>初步得到draw.js:</p>
<div class="htmlcode">
<pre class="brush:js;">
function draw() {
//canvas绘画的前提工作
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
ctx.moveTo(200,100);
ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
ctx.moveTo(200,50);
ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
ctx.stroke();
}
}
</pre>
</div>
<p>同时在canvas.html中 加入draw.js的引用。 </p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<html>
<head>
<title>Canvas clock tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
<script src="/UploadFiles/2021-04-02/draw.js">
<p>在完成了第二步之后，我们可以看到一个当前时间的圆形时钟轮廓。那么接下来，就是让它动起来！ </p>
<p><strong>第三步：</strong>使用requestAnimationFrame()方法让时钟动起来。</p>
<p>requestAnimationFrame()的执行频率是1秒60帧，用户可以在requestAnimationFrame定义事件，使其在每一帧中重复、迭代完成相应的事件。</p>
<p>在我们这个案例中，每一帧里面requestAnimationFrame要做的事情很简单，为当前时间的三个参数（时针、分针、秒针）添加增量，然后重新绘制时钟。</p>
<p>根据一秒60帧的频率，那么second在1帧里面的增量是：2*π / 60 / 60 = π / 1800；</p>
<p>minute在一帧里面的增量是second增量的60分之一；hour在一帧里面的增量是minute的12分之1。</p>
<p>另外：当hour、minute、second任一一个变量到达3/2*π后，意味着完成了一个周期，就要重新初始化为(-1/2)*π，否则会覆盖绘制成一个圆。</p>
<p>由此得到：requestAnimationFrame()函数中，hour，minute，second的更新过程如下： </p>
<div class="htmlcode">
<pre class="brush:js;">
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}</span>
</pre>
</div>
<p> 更新draw.js的完整代码如下：</p>
<div class="htmlcode">
<pre class="brush:js;">
function draw() {
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
ctx.moveTo(200,100);
ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
ctx.moveTo(200,50);
ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
ctx.stroke();
requestAnimationFrame(step);
}
}
}
</pre>
</div>
<p>到这步为止，我们已经得到了一个会动的圆形时钟，接下来，我们为其添加上指针。 </p>
<p><strong>第四步*：</strong>添加时针、分针、秒针。 </p>
<p>JS为我们提供了Math.cos() 、Math.sin() 计算指针到达的位置，它们所接收参数的单位也都是弧度。</p>
<div class="htmlcode">
<pre class="brush:js;">
function draw() {
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
//秒针的终点
xs = 150 * Math.cos(second) + 200;
ys = 150 * Math.sin(second) + 200;
//分针的终点
xm = 100 * Math.cos(minute) + 200;
ym = 100 * Math.sin(minute) + 200;
//时针的终点
xh = 50 * Math.cos(hour) + 200;
yh = 50 * Math.sin(hour) + 200;
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
//绘制指针
ctx.moveTo(200,200);
ctx.lineTo(xs,ys);
ctx.moveTo(200,200);
ctx.lineTo(xm,ym);
ctx.moveTo(200,200);
ctx.lineTo(xh,yh);
//绘制圆形轮廓
ctx.moveTo(200,150);
ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
ctx.moveTo(200,100);
ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
ctx.moveTo(200,50);
ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
ctx.stroke();
requestAnimationFrame(step);
}
}
}
</pre>
</div>
<p>嗯嗯，虽然指针是画出来了，都是我略感后悔，因为感觉太丑了。从审美学角度而言，带指针时钟就应该是个全圆轮廓的时钟。不知道读者有没有同感。我决定在第五步中把第四步回退了。 </p>
<p><strong>第五步：</strong>个性化、美化、自定义你的时钟。</p>
<p>html5的canvas画布，提供了多种样式属性，如线条颜色、线条粗细等等。</p>
<p>为了提高代码的可重用性，我们将画圆的代码抽象成一个函数。</p>
<div class="htmlcode">
<pre class="brush:js;">
function draw() {
var canvas = document.getElementById('clock');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
//绘制圆形轮廓
drawCircle(ctx, 100, hour, '#99ff00');
drawCircle(ctx, 120, minute, '#99ff66');
drawCircle(ctx, 140, second, '#66cc66');
requestAnimationFrame(step);
}
}
}
function drawCircle(ctx, radius ,endAngle, color){
ctx.beginPath();
ctx.moveTo(200,200-radius);
ctx.strokeStyle = color;
ctx.lineWidth = 20;
ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
ctx.stroke();
}
</pre>
</div>
<p><strong>第六步（后续添加）：</strong>为时钟添加数字指数。</p>
<p>具体做法为多增加一个画布canvas元素。既然我们已经能从Date()中获取时间，那么显示数值的来源不成问题。读者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法来实现每秒更新一次指数。 </p>
<p>修改后的canvas.html</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<html>
<head>
<title>Canvas clock tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
#display {position: absolute; top:8; left:8;}
</style>
<script src="/UploadFiles/2021-04-02/draw.js">
<p>修改后的draw.js</p>
<div class="htmlcode">
<pre class="brush:js;">
function draw() {
var canvas = document.getElementById('clock');
var displayCanvas = document.getElementById('display');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) * Math.PI/6;
var minute = currentTime.getMinutes() * Math.PI/30;
var second = currentTime.getSeconds() * Math.PI/30;
hour = hour - Math.PI * (1/2);
minute = minute - Math.PI * (1/2);
second = second - Math.PI * (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var ctxD = displayCanvas.getContext('2d');
showDisplay(ctxD, currentTime);
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
if(minute >= Math.PI * (3/2)){
minute = Math.PI * (-1/2);
}
if(second >= Math.PI * (3/2)){
second = Math.PI * (-1/2);
}
ctx.clearRect(0, 0, 400 , 400);
ctx.beginPath();
//绘制圆形轮廓
drawCircle(ctx, 100, hour, '#99ff00');
drawCircle(ctx, 120, minute, '#99ff66');
drawCircle(ctx, 140, second, '#66cc66');
requestAnimationFrame(step);
}
}
}
function drawCircle(ctx, radius ,endAngle, color){
ctx.beginPath();
ctx.moveTo(200,200-radius);
ctx.strokeStyle = color;
ctx.lineWidth = 20;
ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
ctx.stroke();
}
function showDisplay(ctx, date){
var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
//计时文字样式
ctx.font = "13px Sans-Serif";
ctx.textAlign = "center";
ctx.strokeText(h+":"+m+":"+s,200,200);
var timmer = setInterval(function(){
s++;
if(s>=60){
m++;
s=0;
}
if(m>=60){
h++;
m=0;
}
if(h>=24){
h=0;
}
ctx.clearRect(0,0,400,400);
ctx.strokeText(h+":"+m+":"+s,200,200);
},1000);
}
</pre>
</div>
<p>最终成果图如下：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016919170817878.jpg');"><img src="/UploadFiles/2021-04-02/2016919170817878.jpg" alt="js Canvas实现圆形时钟教程" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/105321.html" title="AngularJS 过滤器（自带和自建）详解">AngularJS 过滤器（自带和自建）详解</a></p>
<p>下一篇：<a href="/3g/1/105323.html" title="Bootstrap模态框调用功能实现方法">Bootstrap模态框调用功能实现方法</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>