Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 利用canvas API 展示陰影效果

HTML5 利用canvas API 展示陰影效果

日期：2017/3/1 10:23:16 编辑：Linux編程

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

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8"> 
<title>HTML5 Combine Shape DEMO</title> 
<script type="text/javascript" src="js/drawShadow.js"></script> 
</head> 
 
<body onload="draw('canvas')"></body> 
<h2>canvas：顯示陰影效果</h2> 
 
 
<!-- 指定一個canvas元素用於顯示結果 --> 
<canvas id="canvas" width="400” height="400"/> 
<br><br>

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

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang ([email protected]) 
 */ 
  
 function draw (id){ 
     
    //取得畫布對象 
    var canvas = document.getElementById(id); 
    if(canvas ==null) 
    return false; 
    //取得上下文 
    var context = canvas.getContext('2d'); 
    //繪制底圖 
    context.fillStyle='#FFEEFF'; 
    context.fillRect(0,0,400,400); 
     
    //以下4個屬性是陰影的設置屬性，用他們可以用來畫陰影效果 
     
    //shadowOffSetX是橫向位移量，所以這裡設置為10表明陰影會出現在原圖形右邊，最多10像素 
    context.shadowOffSetX=10; 
    //shadowOffSetX是縱向位移量，所以這裡設置為10表明陰影會出現在原圖形下邊，最多10像素 
    context.shadowOffsetY=10; 
    //陰影的顏色 
    context.shadowColor="rgba(50,50,100,0.5)"; 
    //陰影的模糊范圍 
    context.shadowBlur=7.5; 
     
    //所以到這裡為止，我們吧上下文關聯上了陰影效果，所有用這個context繪制的圖形都會有（+10，+10）的陰影效果 
     
    //繪制五角星 
    context.translate(50,50); 
    create5star(context); 
    context.fill(); 
 } 
  
 function create5star(context){ 
     
     var n = 0; 
     var dx=100; 
     var dy=0; 
     var s = 50; 
     //創建路徑 
     context.beginPath(); 
     context.fillStyle='rgba(255,0,0,0.5)'; 
     var x = Math.sin(0); 
     var y=Math.cos(0); 
     var dig = Math.PI/5*4; 
     //畫5條邊 
     for(var i =0;i<5;i++){ 
        var x = Math.sin(i * dig); 
        var y = Math.cos(i* dig); 
        context.lineTo(dx+x*s,dy+y*s); 
     } 
     context.closePath(); 
 }