HTML5中使用Canvas繪製帶陰影製作效果的圖形

1，陰影的相關屬性

HTML5 Canvas中提供了設定陰影的四個屬性值分別為：

context.shadowColor = “red” 表示設定陰影顏色為紅色

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

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

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

shadowColor：陰影顏色（通常使用中性灰，也可使用半透明的顏色。）
shadowBlur：陰影的模糊程度（0表示銳利的陰影，即輪廓與原始形狀一樣鮮明。一般20就比較模糊了。）
shadowOffsetX、shadowOffsetY：陰影相對於內容的位置（兩個屬性都設5，表示陰影在原圖形向下、向右各5個像素的位置）

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

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);

2，陰影的使用範例

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//繪製矩形陰影
context.rect(20, 20, 200 , 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
 
//繪製星形陰影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
var img = document.getElementById("star");
context.drawImage(img, 250, 30);
 
context.textBaseLine = "top";
context.font = "bold 20px Arial";
 
//繪製三行文本的陰影
context.shadowBlur = 3;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = "steelblue";
context.fillText("Welcome to 111cn.net", 10, 175);
 
context.shadowBlur = 5;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fillStyle = "green";
context.fillText("Welcome to 111cn.net", 10, 225);
 
context.shadowBlur = 15;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = "black"
context.fillStyle = "white";
context.fillText("Welcome to 111cn.net", 10, 290);

例子

<!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>