使用canvas绘制动画时钟

一代码

<!DOCTYPE html >
<head>
<meta charset="UTF-8" ><title>绘制动态时钟</title><script type="text/javascript">var canvas;var context;function window_onload() {canvas = document.getElementById("canvas");context = canvas.getContext('2d');setInterval("draw()",1000);}function draw() {var radius = Math.min(canvas.width / 2, canvas.height / 2) - 25;var centerx = canvas.width / 2;var centery = canvas.height / 2;context.clearRect(0, 0, canvas.width, canvas.height);context.save();context.fillStyle = '#efefef';context.strokeStyle = '#c0c0c0';context.beginPath();context.arc(centerx, centery, radius, 0, Math.PI*2, 0);context.fill();context.stroke();context.closePath();context.restore();var r = radius - 10;context.font = 'bold 16px 宋体';Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));Drawtext('3', centerx + radius-10, centery);Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));Drawtext('6', centerx , centery +r);Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));Drawtext('9', centerx-radius+10, centery);Drawtext('10', centerx - (0.866 * r), centery - (0.50 * r));Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));Drawtext('12', centerx, 35);context.save();context.fillStyle = 'black';context.beginPath();context.arc(centerx, centery, 3, 0, Math.PI * 2, 0);context.closePath();context.fill();context.stroke();context.restore();//var date = new date();// var h = date.getHours();//var m = date.getMinutes();//var s = date.getSeconds();//var a = ((h / 12) * Math.PI * 2) - 1.57 + ((m / 60) * 0.524);var h = 13;var m = 24;var s = 59;var a = ((h / 12) * Math.PI * 2) - 1.57 + ((m / 60) * 0.524);context.save();context.lineWidth = 3;context.fillStyle = 'darkgray';context.strokeStyle = 'gray';context.beginPath();context.arc(centerx, centery, radius - 55, a + 0.01, a, 1);context.lineTo(centerx, centery);context.arc(centerx, centery, radius - 40, ((m / 60) * 6.27) - 1.57, ((m / 60) * 6.28) - 1.57, 0);context.lineTo(canvas.width / 2, canvas.height / 2);context.arc(centerx, centery, radius - 30, ((s / 60) * 6.27) - 1.57, ((s / 60) * 6.28) - 1.57, 0);context.lineTo(centerx, centery);context.closePath();context.fill();context.stroke();context.restore();var hours = String(h);var minutes = String(m);var seconds = String(s);if (hours.length == 1) h = '0' + h;if (minutes.length == 1) m = '0' + m;if (seconds.length == 1) s = '0' + s;var str = h + ':' + m + ':' + s;Drawtext(str, centerx, centery + radius + 12);}function Drawtext(text, x, y) {context.save();x -= (context.measureText(text).width / 2);y += 9;context.beginPath();context.translate(x, y);context.fillText(text, 0, 0);context.restore();}</script><style type="text/css">div{display:-moz-box;display:-webkit-box;-moz-box-pack:center;-webkit-box-pack:center;width:100%;}canvas{background-color:White;}</style>
</head>
<body onload="window_onload()">
<div><h1>使用canvas元素绘制指针动画时钟</h1></div>
<div><canvas id="canvas" width="200px" height="200px"></canvas></div>
</body>
</html>

转载于:https://www.cnblogs.com/yangyu54/p/4598212.html

使用canvas绘制动画时钟相关推荐

Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
python制作简单动画_Python tkinter Canvas绘制动画
其实前面程序中的高亮显示已经是动画效果了.程序会用红色.黄色交替显示几何图形的边框,这样看上去就是动画效果了.实现其他动画效果也是这个原理,程序只要增加一个定时器,周期性地改变界面上图形项的颜色.大小 ...
Canvas绘制动画
给大家分享一个用Canvas写的"小人吃豆"的动画,效果如下: 哈哈,实现代码如下: <!DOCTYPE html> <html><head lang ...
7-2 使用canvas绘制动画人物
将一张长图上的人物,使drawImage方法裁切出来,并绘制在canvas画布上.开启定时器,每隔50毫秒裁切并绘制一个人物的帧动作,当人物动作为最后一帧时,切换至第一帧,实现人物动画效果. 1.1 ...
html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
android canvas 画按钮,Android 用Canvas轻松绘制一个时钟
接下来这篇文章主要是结束如何轻松自定义一个View并使用Canvas绘制一个时钟的案例,话不多说先上图瞅瞅,一共实现了两种效果,一种是秒动(秒针一秒走一针).另一种是连动式的,秒针不会停会一直走动,话 ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
Android中使用SurfaceView和Canvas来绘制动画
事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...
canvas绘制简单动画思路总结
使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来.这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次屏幕刷新率保持在60次/秒保障动画效 ...

使用canvas绘制动画时钟

使用canvas绘制动画时钟相关推荐

最新文章

热门文章