• 用canvas画简易钟表



    画钟表前,我们需要弄清楚钟表的构造和各个元素间的关系

    同时还要学会弧度的运用
    难点还是在于对context.save()context.restore()的理解
    把思路理清,写起来也会变得简单



    效果图:




    下面来看一下代码:


    <!
    DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div{ text-align: center; } #canvas{ border: 1px solid #000; } </style> </head> <body> <div id="div"> <canvas id="canvas" width="500px" height="500px"></canvas> </div> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var width=canvas.width; //获取画布的宽 var height=canvas.height; //获取画布的高 var r=width/2; //设置圆的半径为宽的一半 function fun(){ ctx.save() //保存当前的状态 ctx.beginPath(); //开启一条路径 ctx.translate(r,r); //将画布原点改为(r,r) ctx.arc(0,0,r-5,0,Math.PI*2); //设置半径为R-5的圆,因为设置了线宽为10,所以半径减去了线宽的一半 ctx.closePath(); //闭合路径 ctx.lineWidth=10; ctx.stroke(); // var li=[3,4,5,6,7,8,9,10,11,12,1,2] //设置一个数组保存钟表的数字刻度,按照弧度的起始位置设置 for(var i=0 ;i<li.length;i++){ ctx.beginPath(); ctx.fillStyle="#000000" ctx.textBaseline="middle"; ctx.textAlign="center"; ctx.font="18px Arial"; var x=Math.cos(Math.PI*2/12*i)*(r-30); //用三角函数cos计算出数字所在的X坐标 var y=Math.sin(Math.PI*2/12*i)*(r-30); //用三角函数cos计算出数字所在的X坐标 ctx.fillText(""+li[i]+"",x,y); ctx.closePath(); for(var j=0 ;j<60;j++){ //画60个圆点为分秒刻度 ctx.beginPath(); var x=Math.cos(Math.PI*2/60*j)*(r-15); var y=Math.sin(Math.PI*2/60*j)*(r-15); if(j%5==0){ ctx.fillStyle="#000000"; //给整点刻度圆点设置为黑色 }else{ ctx.fillStyle="#ccc"; //其余设置为灰色 } ctx.arc(x,y,2,0,Math.PI*2); ctx.fill(); ctx.closePath(); } } } function drawHour(hour,minu){ //设置时针方法 ctx.save(); //保存当前的状态 ctx.beginPath(); ctx.lineWidth=6; var rad = Math.PI*2 / 12 * hour; var radminu = Math.PI / 360 * minu; ctx.rotate(rad + radminu) //时针的旋转角度 ctx.moveTo(0,10); ctx.lineTo(0,-r+150); //绘制时针 ctx.lineCap="round"; //设置时针的圆角样式,lineCap受closePath影响,两者同时出现时,lineCap无效 ctx.stroke() ctx.restore() //返回之前保存过的状态 } function drawMinu(minu){ //设置分针方法 ctx.save(); //保存当前的状态 ctx.beginPath(); ctx.lineWidth = 4; var rad = Math.PI * 2 / 60 * minu; ctx.rotate(rad) ctx.moveTo(0,10); ctx.lineTo(0,-r+100);         //绘制分针 ctx.lineCap="round"; //设置时针的圆角样式,lineCap受closePath影响,两者同时出现时,lineCap无效 ctx.stroke()              //描边 ctx.restore() //返回之前保存过的状态 } function drawmiao(miao){ ctx.save(); //保存当前的状态 ctx.beginPath(); ctx.lineWidth = 1; var rad = Math.PI * 2 / 60 * miao; ctx.rotate(rad) ctx.moveTo(-2,20); ctx.lineTo(2,20); ctx.lineTo(1,-r+50); ctx.lineTo(-1,-r+50); ctx.closePath() //绘制秒针 ctx.fillStyle="#f00" ctx.fill() ctx.restore() //返回之前保存过的状态 } function draw(){ ctx.clearRect(0,0,width,height); var datenow = new Date(); var hour = datenow.getHours(); var minu = datenow.getMinutes(); var miao = datenow.getSeconds(); fun() drawHour(hour,minu) drawMinu(minu) drawmiao(miao) //执行 ctx.restore() //返回之前保存过的状态 } draw() //执行 setInterval(draw,1000) //定时器,设置间隔时间为1s </script> </body> </html>
  • 相关阅读:
    python学习笔记
    win10优化设置
    jpa基本用法
    5_方法(函数)、参数传递
    12_文件基本权限
    10_管理用户和组
    9_用户和组的相关配置文件
    7_vim 编辑器使用技巧
    8_Xmanager 远程连接 Linux 系统工具使用方法
    5_Linux系统目录结构,相对/绝对路径
  • 原文地址:https://www.cnblogs.com/fushuxin/p/10110735.html
Copyright © 2020-2023  润新知