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);
注：上例中执行代码所得矩形，粉色多于灰色，是因为矩形的起点位置位于渐变的位置的左上方。
原文：http://www.cnblogs.com/cornlin/p/7648464.html