歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5 利用canvas API 展示陰影效果

HTML5的Canvas自帶API可以顯示陰影效果,主要還是在畫布(canvas)的上下文對象(context)上做文章

  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>HTML5 Combine Shape DEMO</title> 
  5. <script type="text/javascript" src="js/drawShadow.js"></script> 
  6. </head> 
  7.  
  8. <body onload="draw('canvas')"></body> 
  9. <h2>canvas:顯示陰影效果</h2> 
  10.  
  11.  
  12. <!-- 指定一個canvas元素用於顯示結果 --> 
  13. <canvas id="canvas" width="400” height="400"/> 
  14. <br><br> 

畫帶陰影效果的圖形見如下的js代碼:

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang ([email protected]) 
  5.  */ 
  6.   
  7.  function draw (id){ 
  8.      
  9.     //取得畫布對象 
  10.     var canvas = document.getElementById(id); 
  11.     if(canvas ==null) 
  12.     return false; 
  13.     //取得上下文 
  14.     var context = canvas.getContext('2d'); 
  15.     //繪制底圖 
  16.     context.fillStyle='#FFEEFF'; 
  17.     context.fillRect(0,0,400,400); 
  18.      
  19.     //以下4個屬性是陰影的設置屬性,用他們可以用來畫陰影效果 
  20.      
  21.     //shadowOffSetX是橫向位移量,所以這裡設置為10表明陰影會出現在原圖形右邊,最多10像素 
  22.     context.shadowOffSetX=10; 
  23.     //shadowOffSetX是縱向位移量,所以這裡設置為10表明陰影會出現在原圖形下邊,最多10像素 
  24.     context.shadowOffsetY=10; 
  25.     //陰影的顏色 
  26.     context.shadowColor="rgba(50,50,100,0.5)"; 
  27.     //陰影的模糊范圍 
  28.     context.shadowBlur=7.5; 
  29.      
  30.     //所以到這裡為止,我們吧上下文關聯上了陰影效果,所有用這個context繪制的圖形都會有(+10,+10)的陰影效果 
  31.      
  32.     //繪制五角星 
  33.     context.translate(50,50); 
  34.     create5star(context); 
  35.     context.fill(); 
  36.  } 
  37.   
  38.  function create5star(context){ 
  39.      
  40.      var n = 0; 
  41.      var dx=100; 
  42.      var dy=0; 
  43.      var s = 50; 
  44.      //創建路徑 
  45.      context.beginPath(); 
  46.      context.fillStyle='rgba(255,0,0,0.5)'; 
  47.      var x = Math.sin(0); 
  48.      var y=Math.cos(0); 
  49.      var dig = Math.PI/5*4; 
  50.      //畫5條邊 
  51.      for(var i =0;i<5;i++){ 
  52.         var x = Math.sin(i * dig); 
  53.         var y = Math.cos(i* dig); 
  54.         context.lineTo(dx+x*s,dy+y*s); 
  55.      } 
  56.      context.closePath(); 
  57.  } 

 

最終展示效果如圖:

650) this.width=650;" border=0>

Copyright © Linux教程網 All Rights Reserved