標籤：
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ /> 9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script> 10 <style type=‘text/css‘> 11 html,body { 12 margin: 0; padding: 0; 13 } 14 15 html { 16 height: 100%; 17 } 18 19 body { 20 background: #000; 21 } 22 23 #can { 24 background: #FFF; display: block; margin: 25px auto; border-radius: 2px; 25 } 26 </style> 27 <script type=‘text/javascript‘> 28 $( function(){ 29 var oCan = $( ‘#can‘ ).get( 0 ).getContext( ‘2d‘ ); 30 /* 31 繪製錶盤: 32 */ 33 oCan.translate( 250 , 225 ); 34 oCan.save(); 35 function setClock(){ 36 oCan.clearRect( -250 , -250 , 500 , 450 ); 37 oCan.beginPath(); 38 oCan.lineWidth = 5; 39 oCan.strokeStyle = ‘#CAA‘; 40 oCan.arc( 0 , 0 , 150 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , false ); 41 oCan.stroke(); 42 oCan.closePath(); 43 oCan.restore(); 44 /* 45 繪製時針刻度標記 46 */ 47 oCan.save(); 48 for( var i = 0 ; i < 12 ; i++ ){ 49 oCan.beginPath(); 50 oCan.lineWidth = 5; 51 oCan.strokeStyle = ‘#F93‘; 52 oCan.rotate( 30 * Math.PI / 180 ); 53 oCan.moveTo( 0 , -145 ); 54 oCan.lineTo( 0 , -125 ); 55 oCan.stroke(); 56 oCan.lineCap = ‘bevel‘; 57 oCan.closePath(); 58 } 59 oCan.restore(); 60 /* 61 繪製分針刻度標記 62 */ 63 oCan.save(); 64 for( var i = 0 ; i < 60 ; i++ ){ 65 oCan.beginPath(); 66 oCan.lineWidth = 3; 67 oCan.strokeStyle = ‘#F93‘; 68 oCan.rotate( 6 * Math.PI / 180 ); 69 oCan.moveTo( 0 , -145 ); 70 oCan.lineTo( 0 , -135 ); 71 oCan.stroke(); 72 oCan.closePath(); 73 } 74 oCan.restore(); 75 76 /* 77 擷取系統時間對象 78 */ 79 var data = new Date(); 80 var hour = data.getHours(); 81 var minutes = data.getMinutes(); 82 var seconds = data.getSeconds(); 83 /* 84 繪製時針 85 */ 86 oCan.save(); 87 oCan.beginPath(); 88 oCan.lineCap = ‘round‘; 89 oCan.rotate( ( hour * 30 * Math.PI + Math.floor( 6 * minutes / 15 * Math.PI ) ) / 180 ); 90 oCan.lineWidth = 4; 91 oCan.strokeStyle = ‘#F93‘; 92 oCan.moveTo( 0 , 0 ); 93 oCan.lineTo( 0 , -135 ); 94 oCan.stroke(); 95 oCan.closePath(); 96 oCan.restore(); 97 98 /* 99 繪製分針100 */101 oCan.save();102 oCan.beginPath();103 oCan.rotate( ( minutes * 6 * Math.PI + Math.floor( 6 * seconds / 60* Math.PI ) ) / 180 );104 oCan.lineWidth = 3;105 oCan.strokeStyle = ‘#F93‘;106 oCan.moveTo( 0 , 0 );107 oCan.lineTo( 0 , -95 );108 oCan.stroke();109 oCan.closePath();110 oCan.restore();111 /* 112 繪製秒針113 */114 oCan.save();115 oCan.beginPath();116 oCan.lineWidth = 2;117 oCan.strokeStyle = ‘#F93‘;118 oCan.rotate( seconds * 6 * Math.PI / 180 );119 oCan.moveTo( 0 , 0 );120 oCan.lineTo( 0 , -120 );121 oCan.stroke();122 oCan.closePath();123 oCan.restore();124 /* 125 繪製中央裝飾126 */127 oCan.save();128 oCan.beginPath();129 oCan.lineWidth = 2;130 oCan.strokeStyle = ‘#F93‘;131 oCan.fillStyle = ‘#FFF‘;132 oCan.arc( 0 , 0 , 5 , 0 , 2 * Math.PI , false );133 oCan.fill();134 oCan.stroke();135 oCan.closePath();136 oCan.restore();137 }138 setClock();139 setInterval( setClock , 1000 );140 } );141 </script>142 </head>143 <body>144 <canvas id=‘can‘ width=‘500‘ height=‘450‘>檢測到您的瀏覽器版本過低請升級您的瀏覽器,以擷取更好的使用者體驗...</canvas>145 </body>146 </html>
[ html 繪圖 時鐘 ] canvas繪圖時鐘執行個體示範之三
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
