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

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

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

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

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    HTML5 Canvas陰影使用方法實例演示
    
            
    來源：易賢網(wǎng)  閱讀：1544 次  日期：2016-07-13 13:42:11 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“HTML5 Canvas陰影使用方法實例演示”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    HTML5 Canvas中提供了設(shè)置陰影的四個屬性值可以實現(xiàn)陰影文字、3D拉影效果、邊緣模糊效果文字，具體的演示代碼如下，想學習的朋友可以參考下
    

    HTML5 Canvas中提供了設(shè)置陰影的四個屬性值分別為：
    

    context.shadowColor = “red” 表示設(shè)置陰影顏色為紅色
    

    context.shadowOffsetX = 0表示陰影相對TEXT的水平距離，0表示兩者水平位置重合
    

    context.shadowOffsetY = 0表示陰影相對TEXT的垂直距離，0表示兩者垂直位置重合
    

    context.shadowBlur = 10 陰影模糊效果，值越大模糊越厲害。
    

    一個最簡單的帶有陰影的矩形代碼如下：
    

    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.fillRect(10, hh+10, 200,canvas.height/4-20);
    

    效果如下：
    

    名單
    

    陰影文字：
    

    只要設(shè)置shadowOffsetX與shadowOffsetY的值，當值都正數(shù)時，陰影相對文字的右下
    

    方偏移。當值都為負數(shù)時，陰影相對文字的左上方偏移。
    

    3D拉影效果：
    

    在同一位置不斷的重復(fù)繪制文字同時改變shadowOffsetX、shadowOffsetY、shadowBlur
    

    的值，從小到大不斷偏移不斷增加，透明度也不斷增加。就得到了拉影效果文字。
    

    邊緣模糊效果文字：
    

    在3D拉影效果的基礎(chǔ)上在四個方向重復(fù)，就得到了邊緣羽化的文字效果。
    

    運行效果：
    

    名單
    

    序代碼：
    

    代碼如下:
    

    <!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 Clip Demo - By Gloomy Fish</h1>
    

    <pre>Fill And Stroke Clip</pre>
    

    <div id="my_painter">
    

    <canvas id="text_canvas"></canvas>
    

    </div>
    

    </body>
    

    </html>
                
    
            
    
                        
    
            
    更多信息請查看網(wǎng)頁制作
    
            
    
            
            
            
            
    易賢網(wǎng)手機網(wǎng)站地址：HTML5 Canvas陰影使用方法實例演示
    
            
    由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>
            
        
    
    
    
    
    
        

					
		
    
		
    
            
    
                
    2026國考·省考課程試聽報名
    
                
      

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

        
    
    
    
    
    

    

    

    


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

    

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

    

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