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

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

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

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

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    html5實現canvas陰影效果示例
    
            
    來源：易賢網  閱讀：997 次  日期：2016-06-16 09:03:26 
    
            
    溫馨提示：易賢網小編為您整理了“html5實現canvas陰影效果示例”,方便廣大網友查閱！
    
            
    
                        
    
            
    
             
    在html5中實現canvas陰影效果
    

    代碼如下:
    

    <!doctype html>
    

    <html>
    

    <head>
    

    <meta http-equiv=x-ua-compatible content=chrome=ie8>
    

    <meta http-equiv=content-type content=text/html;charset=utf-8>
    

    <title>canvas clip demo</title>
    

    <link href=default.css rel=stylesheet />
    

    <script>
    

    var ctx = null; // global variable 2d context
    

    var imagetexture = null;
    

    window.onload = function() {
    

    var canvas = document.getelementbyid(text_canvas);
    

    console.log(canvas.parentnode.clientwidth);
    

    canvas.width = canvas.parentnode.clientwidth;
    

    canvas.height = canvas.parentnode.clientheight;
    

    if (!canvas.getcontext) {
    

    console.log(canvas not supported. please install a html5 compatible browser.);
    

    return;
    

    }
    

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

    // section one - shadow and blur
    

    context.fillstyle=black;
    

    context.fillrect(0, 0, canvas.width, canvas.height/4);
    

    context.font = '60pt calibri';
    

    context.shadowcolor = white;
    

    context.shadowoffsetx = 0;
    

    context.shadowoffsety = 0;
    

    context.shadowblur = 20;
    

    context.filltext(blur canvas, 40, 80);
    

    context.strokestyle = rgba(0, 255, 0, 1);
    

    context.linewidth = 2;
    

    context.stroketext(blur canvas, 40, 80);
    

    // section two - shadow font
    

    var hh = canvas.height/4;
    

    context.fillstyle=white;
    

    context.fillrect(0, hh, canvas.width, canvas.height/4);
    

    context.font = '60pt calibri';
    

    context.shadowcolor = rgba(127,127,127,1);
    

    context.shadowoffsetx = 3;
    

    context.shadowoffsety = 3;
    

    context.shadowblur = 0;
    

    context.fillstyle = rgba(0, 0, 0, 0.8);
    

    context.filltext(blur canvas, 40, 80+hh);
    

    // section three - down shadow effect
    

    var hh = canvas.height/4 + hh;
    

    context.fillstyle=black;
    

    context.fillrect(0, hh, canvas.width, canvas.height/4);
    

    for(var i = 0; i < 10; i++)
    

    {
    

    context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );
    

    context.shadowoffsetx = i*2;
    

    context.shadowoffsety = i*2;
    

    context.shadowblur = i*2;
    

    context.fillstyle = rgba(127, 127, 127, 1);
    

    context.filltext(blur canvas, 40, 80+hh);
    

    }
    

    // section four - fade effect
    

    var hh = canvas.height/4 + hh;
    

    context.fillstyle=green;
    

    context.fillrect(0, hh, canvas.width, canvas.height/4);
    

    for(var i = 0; i < 10; i++)
    

    {
    

    context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );
    

    context.shadowoffsetx = 0;
    

    context.shadowoffsety = -i*2;
    

    context.shadowblur = i*2;
    

    context.fillstyle = rgba(127, 127, 127, 1);
    

    context.filltext(blur canvas, 40, 80+hh);
    

    }
    

    for(var i = 0; i < 10; i++)
    

    {
    

    context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );
    

    context.shadowoffsetx = 0;
    

    context.shadowoffsety = i*2;
    

    context.shadowblur = i*2;
    

    context.fillstyle = rgba(127, 127, 127, 1);
    

    context.filltext(blur canvas, 40, 80+hh);
    

    }
    

    for(var i = 0; i < 10; i++)
    

    {
    

    context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );
    

    context.shadowoffsetx = i*2;
    

    context.shadowoffsety = 0;
    

    context.shadowblur = i*2;
    

    context.fillstyle = rgba(127, 127, 127, 1);
    

    context.filltext(blur canvas, 40, 80+hh);
    

    }
    

    for(var i = 0; i < 10; i++)
    

    {
    

    context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + );
    

    context.shadowoffsetx = -i*2;
    

    context.shadowoffsety = 0;
    

    context.shadowblur = i*2;
    

    context.fillstyle = rgba(127, 127, 127, 1);
    

    context.filltext(blur canvas, 40, 80+hh);
    

    }
    

    }
    

    </script>
    

    </head>
    

    <body>
    

    <h1>html5 canvas</h1>
    

    <pre>fill and stroke clip</pre>
    

    <div id=my_painter>
    

    <canvas id=text_canvas></canvas>
    

    </div>
    

    </body>
    

    </html>
                
    
            
    
                        
    
            
    更多信息請查看網頁制作
    
            
    
            
            
            
            
    易賢網手機網站地址：html5實現canvas陰影效果示例
    
            
    
    
    
    
        

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

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

        
    
    
    
    
    

    

    

    


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

    

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

    

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