<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;">您的浏览器不支持canvas </canvas> <script type="text/javascript"> var c =document.querySelector('#myCanvas ' ); // identify and specify the context of the canvas var CTX = c.getContext ( ' 2D ' ); // 1. dial ctx.lineWidth = 10 ; ctx.stroeStyle = ' # 000 ' ; ctx.beginPath (); ctx.arc ( 250 , 250 , 200 is , 0 , 360 , to false ); ctx.stroke () ctx.closePath () // scale // time of for ( var I =0 ; I < 12 is ; I ++ ) { ctx.save (); ctx.lineWidth = . 8 ; ctx.strokeStyle = ' Orange ' ; // set point position 0,0 ctx.translate ( 250 , 250 ); // Sets the rotation angle ctx.rotate (I * 30 * Math.PI / 180 [ ); ctx.beginPath (); ctx.moveTo ( 0 , 170. ); ctx.lineTo ( 0 ,190 ); ctx.stroke (); ctx.closePath (); ctx.restore () } // sub-scale for ( var I = 0 ; I < 60 ; I ++ ) { ctx.save (); ctx.lineWidth = 4.5 of 5 ; ctx.strokeStyle = ' Orange ' ; // set point position 0,0 ctx.translate ( 250 , 250 ); // set the rotation angle ctx.rotate(i*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,180); ctx.lineTo(0,190); ctx.stroke(); ctx.closePath(); ctx.restore() } // 时针 ctx.save(); ctx.lineWidth=7; ctx.strokeStyle="#000"; ctx.translate(250,250); ctx.rotate(270*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,110); ctx.lineTo(0,-10); ctx.stroke(); ctx.closePath(); ctx.restore(); // 分针 ctx.save(); ctx.lineWidth=5; ctx.strokeStyle="#000"; ctx.translate(250,250); ctx.rotate(210*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,130); ctx.lineTo(0,-10); ctx.stroke(); ctx.closePath(); ctx.restore(); // 秒针 ctx.save(); ctx.lineWidth=3; ctx.strokeStyle="#000"; ctx.translate(250,250); ctx.rotate(0*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,150); ctx.lineTo(0,-10); ctx.stroke(); ctx.closePath(); ctx.restore(); // 表盘中心 ctx.lineWidth=2; ctx.storeStyle='red'; ctx.beginPath(); ctx.arc(250,250,3.5,0,360,false); ctx.stroke(); ctx.fillStyle = ' White ' ; ctx.fill (); ctx.closePath (); // set the hour hand, second hand in front of the small dots ctx.translate ( 250 , 250 ); ctx.beginPath (); ctx.arc ( 0 , 140 , 2 , 0 , 360 , to false ); ctx.stroke (); ctx.fillStyle = " White " ; ctx.fill (); ctx.closePath () </ Script> </ body> </ HTML>
Canvas painting with a clock
Guess you like
Origin www.cnblogs.com/white55k/p/11846744.html
Recommended
Ranking