1、陰影
　　shadowColor 陰影顏色

　　shadowOffsetX 陰影x軸的偏移量

　　shadowOffsetY y軸偏移量

　　shadowBlur 模糊像素

var canvas = document.getElementById(‘canvas‘);
var context = canvas.getContext(‘2d‘);

context.shadowColor = ‘rgba(280,187,188,1)‘;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur 
 
= 20;
context.fillStyle = ‘rgba(280,187,188,1)‘;
context.fillRect(50,50,100,100);

2、漸變，由canvasGradient實例表示。

（1）線性漸變createLinearGradient(起點x，起點y，終點x，終點y)，創建指定大小的漸變。

var gradient = context.createLinearGradient(30,30,130,130);
gradient.addColorStop(0,‘rgba(280,187,188,1)‘);// addColorStop()指定色標
gradient.addColorStop(1,‘rgba(180,187,188,1)‘);
context.fillStyle 
 
= gradient;
context.fillRect(10,10,100,100);

註：上例中執行代碼所得矩形，粉色多於灰色，是因為矩形的起點位置位於漸變的位置的左上方。

canvas陰影與漸變