首次使用canvas标签画图

xiaoxiao2021-03-25 62

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>CLock</title> <style> *{ margin:0px;padding :0px; } </style> </head> <body> <canvas id="clock" width="500" height ="500">您的版本不兼容 </canvas> <script> var clock = document.getElementById("clock"); var cxt = clock.getContext("2d"); function draw(){ cxt.clearRect(0,0,500,500); var now = new Date(); var sec=now.getSeconds(); var min=now.getMinutes(); var hour = now.getHours(); hour=hour+min/60; hour = hour>12?hour-12:hour; //画出表盘 cxt.lineWidth=10; cxt.strokeStyle ="red"; cxt.beginPath(); cxt.arc(250,250,200,0,360,false);//圆心x，圆心y，半径，绘图起点，终点，绘制方向 cxt.closePath(); cxt.stroke();//开始画 //画出十分度，分刻度 for(var i=0;i<12;i++) { cxt.save();//保存画布 cxt.lineWidth=10; cxt.strokeStyle ="#000000"; cxt.translate(250,250);//存储的圆心 cxt.rotate(i*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore();//释放画布 } for(var i=0;i<60;i++) { cxt.save();//保存画布 cxt.lineWidth=5; cxt.strokeStyle ="#000000"; cxt.translate(250,250);//存储的圆心 cxt.rotate(i*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore();//释放画布 } //画出时针等 cxt.save(); cxt.lineWidth=7; cxt.strokeStyle="#ff6699" cxt.translate(250,250); cxt.rotate(hour*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-130); cxt.lineTo(0,10); cxt.closePath(); cxt.stroke(); cxt.restore(); //分针 cxt.save(); cxt.lineWidth=6; cxt.strokeStyle="#0099ff" cxt.translate(250,250); cxt.rotate(min*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); cxt.lineWidth=3; cxt.strokeStyle="#ff3300" cxt.translate(250,250); cxt.rotate(sec*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); //美化 cxt.beginPath(); cxt.arc(0,0,5,0,360,false);//圆心x，圆心y，半径，绘图起点，终点，绘制方向 cxt.closePath(); cxt.fillStyle="gray"; cxt.fill(); cxt.stroke(); /// cxt.beginPath(); cxt.arc(0,-150,5,0,360,false); cxt.closePath(); cxt.fillStyle="red"; cxt.fill(); cxt.stroke(); cxt.restore(); } draw(); setInterval(draw,1000); //美化 </script> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-39379.html

技术

最新回复(0)