茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
    • 

    <sub id="ddbnn"><ol id="ddbnn"></ol></sub>
  • 

    <legend id="ddbnn"></legend><s id="ddbnn"></s>
    

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    使用canvas繪制超炫時鐘
    
            
    來源：易賢網(wǎng)  閱讀：1686 次  日期：2014-12-23 11:49:41 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“使用canvas繪制超炫時鐘”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    先上效果圖：
    

    名單
    

    代碼如下:
    

    <!DOCTYPE html>
    

    <html>
    

    <head>
    

    <meta charset="utf-8">
    

    <title>canvas鐘表</title>
    

    <meta name="Keywords" content="">
    

    <meta name="author" content="@my_programmer">
    

    <style type="text/css">
    

    body{margin:0;}
    

    </style>
    

    </head>
    

    <body onload="run()">
    

    <canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到這段文字，說明你的瀏覽器弱爆了！</canvas>
    

    <script>
    

    window.onload=draw;
    

    function draw() {
    

    var canvas=document.getElementById('canvas');
    

    var context=canvas.getContext('2d');
    

    context.save(); ///////////////////////////////////保存
    

    context.translate(200,200);
    

    var deg=2*Math.PI/12; 
    

    //////////////////////////////////////////////////表盤
    

    context.save(); 
    

    context.beginPath(); 
    

    for(var i=0;i<13;i++){
    

    var x=Math.sin(i*deg);
    

    var y=-Math.cos(i*deg);
    

    context.lineTo(x*150,y*150); 
    

    }
    

    var c=context.createRadialGradient(0,0,0,0,0,130);
    

    c.addColorStop(0,"#22f");
    

    c.addColorStop(1,"#0ef")
    

    context.fillStyle=c;
    

    context.fill();
    

    context.closePath(); 
    

    context.restore(); 
    

    //////////////////////////////////////////////////數(shù)字
    

    context.save();
    

    context.beginPath();
    

    for(var i=1;i<13;i++){
    

    var x1=Math.sin(i*deg);
    

    var y1=-Math.cos(i*deg);
    

    context.fillStyle="#fff";
    

    context.font="bold 20px Calibri";
    

    context.textAlign='center';
    

    context.textBaseline='middle';
    

    context.fillText(i,x1*120,y1*120); 
    

    }
    

    context.closePath(); 
    

    context.restore(); 
    

    //////////////////////////////////////////////////大刻度
    

    context.save();
    

    context.beginPath(); 
    

    for(var i=0;i<12;i++){
    

    var x2=Math.sin(i*deg);
    

    var y2=-Math.cos(i*deg);
    

    context.moveTo(x2*148,y2*148);
    

    context.lineTo(x2*135,y2*135); 
    

    } 
    

    context.strokeStyle='#fff';
    

    context.lineWidth=4;
    

    context.stroke();
    

    context.closePath();
    

    context.restore(); 
    

    //////////////////////////////////////////////////小刻度
    

    context.save();
    

    var deg1=2*Math.PI/60;
    

    context.beginPath(); 
    

    for(var i=0;i<60;i++){
    

    var x2=Math.sin(i*deg1);
    

    var y2=-Math.cos(i*deg1);
    

    context.moveTo(x2*146,y2*146);
    

    context.lineTo(x2*140,y2*140); 
    

    } 
    

    context.strokeStyle='#fff';
    

    context.lineWidth=2;
    

    context.stroke();
    

    context.closePath(); 
    

    context.restore(); 
    

    ///////////////////////////////////////////////////文字
    

    context.save();
    

    context.strokeStyle="#fff";
    

    context.font=' 34px sans-serif';
    

    context.textAlign='center';
    

    context.textBaseline='middle';
    

    context.strokeText('canvas',0,65); 
    

    context.restore(); 
    

    /////////////////////////////////////////////////new Date
    

    var time=new Date();
    

    var h=(time.getHours()%12)*2*Math.PI/12;
    

    var m=time.getMinutes()*2*Math.PI/60;
    

    var s=time.getSeconds()*2*Math.PI/60;</p> <p>////////////////////////////////////////////////時針
    

    context.save();
    

    context.rotate( h + m/12 + s/720) ;
    

    context.beginPath();
    

    context.moveTo(0,6);
    

    context.lineTo(0,-85);
    

    context.strokeStyle="#fff";
    

    context.lineWidth=6;
    

    context.stroke();
    

    context.closePath();
    

    context.restore();
    

    //////////////////////////////////////////////分針
    

    context.save();
    

    context.rotate( m+s/60 ) ;
    

    context.beginPath();
    

    context.moveTo(0,8);
    

    context.lineTo(0,-105);
    

    context.strokeStyle="#fff";
    

    context.lineWidth=4;
    

    context.stroke();
    

    context.closePath();
    

    context.restore();
    

    /////////////////////////////////////////////秒針
    

    context.save();
    

    context.rotate( s ) ;
    

    context.beginPath();
    

    context.moveTo(0,10);
    

    context.lineTo(0,-120);
    

    context.strokeStyle="#fff";
    

    context.lineWidth=2;
    

    context.stroke();
    

    context.closePath();
    

    context.restore(); 
    

    context.restore();/////////////////////////////棧出
    

    setTimeout(draw, 1000);/////////////////////////////計時器</p> <p>}</p> <p></script>
    

    </body>
    

    </html>
    

    更多信息請查看IT技術專欄
                
    
            
    
                        
    
            
    更多信息請查看網(wǎng)頁制作
    
            
    
            
            
            
            
    易賢網(wǎng)手機網(wǎng)站地址：使用canvas繪制超炫時鐘
    
            
    由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>
            
        
    
    
    
    
    
        

					
		
    
		
    
            
    
                
    2026上岸·考公考編培訓報班
    
                
      

                    
    • 
                        報班類型
                        
                    
      • 
                    
    • 
                        姓名
                        
                    
      • 
                    
    • 
                        手機號
                        
                    
      • 
					
    • 
                        驗證碼
                        
                        
                    
      • 
                    
    • 
                        
						
                        
                    
      • 
                
    
            
    
        
    
		
    
        

        
    
    
    
    
    

    

    

    


    
    關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助
    | 非正式的簡要咨詢 | 簡要咨詢須知 |  新媒體/短視頻平臺 | 手機站點  | 投訴建議 

    

    
     工業(yè)和信息化部備案號：滇ICP備2023014141號-1
    云南省教育廳備案號：云教ICP備0901021
    滇公網(wǎng)安備53010202001879號 
    人力資源服務許可證：（云）人服證字（2023）第0102001523號

    

    
    
    
    
        聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx 
    
    咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網(wǎng)