我们先来看看最终效果：
看上去很简单的一个时钟效果，但是具体实现代码仍然包含了一些重点知识。
下面是具体的实现代码：
立即学习“前端免费学习笔记（深入）”；
（提示：要特别注意fillText drawhand 的使用及其中角度的计算）
nbsp;html>JSP Page canvas{ border: 1px solid black; } (function(){ //cavas元素对象 var canvas=null; //canvas的3d上下文 var ctx=null; //cavan的尺寸 var cw=0; var ch=0; /** * 页面导入时的事件处理 */ window.addEventListener("load",function(){ canvas=document.getElementById("sample"); ctx=canvas.getContext("2d"); cw=parseInt(canvas.width); ch=parseInt(canvas.height); ctx.translate(cw/2, ch/2); //绘制时钟 draw_watch(); },false); /** * 绘制时钟 */ function draw_watch(){ //清空Canvas ctx.clearRect(-cw/2,-ch/2,cw,ch); //计算针的最大长度 var len=Math.min(cw, ch)/2; //绘制刻度盘 var tlen=len*0.85; ctx.font="14px 'Arial'"; ctx.fillStyle="black"; ctx.textAlign="center"; ctx.textBaseLine="middle"; for(var i=0; i12 ){ h=h-12; } //绘制时针 var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12; var length1=len * 0.5; var width1=5; var color1="#000000"; drawhand(angle1,length1,width1,color1); //绘制分针 var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60; var length2=len * 0.7; var width2=3; var color2="#555555"; drawhand(angle2,length2,width2,color2); //绘制秒针 var angle3 = Math.PI * 2 *(15 - s)/60; var length3=len * 0.8; var width3=1; var color3="#aa0000"; drawhand(angle3,length3,width3,color3); //设置timer setTimeout(draw_watch,1000); } /** * 针绘制函数 */ function drawhand(angle,len,width,color){ //计算针端的坐标 var x=len*Math.cos(angle); var y=-len * Math.sin(angle); //绘制针 ctx.strokeStyle=color; ctx.lineWidth=width; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(x,y); ctx.stroke(); } })();
登录后复制
相关推荐：html5教程
以上就是利用html 5制作一个简单的时钟效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2907641.html
