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);
注:上例中执行代码所得矩形,粉色多于灰色,是因为矩形的起点位置位于渐变的位置的左上方。
(2)径向渐变(或放射渐变)createRadialGradient(),接收6个参数。两个圆的圆心及半径。
context.save(); var gradient = context.createRadialGradient(350,350,10,350,350,100); gradient.addColorStop(0,'rgba(180,187,188,1)'); gradient.addColorStop(1,'rgba(280,187,188,1)'); context.fillStyle = gradient; context.fillRect(250,250,200,200);
3、使用图片、画布或video
(1)使用图片createPattern(img, repeat-style)
var backgroundImg = new Image(); backgroundImg.src = 'fanfan.jpg'; backgroundImg.onload = function(){ var pattern = context.createPattern(backgroundImg, 'no-repeat');//可使用repeat-x/repeat-y/repeat context.fillStyle = pattern; context.fillRect(10,10,560,560); }
(2)使用画布createPattern(canvas, repeat-style)
var backgroundCanvas = document.createElement('canvas'); backgroundCanvas.width = 100; backgroundCanvas.height = 100; backgroundContext = backgroundCanvas.getContext('2d'); backgroundContext.fillStyle = '#eee'; backgroundContext.fillRect(0,0,100,100); var patternCanvas = context.createPattern(backgroundCanvas, 'repeaet'); context.fillStyle = patternCanvas;//使用backgroundCanvas填充canvas context.fillRect(0,0,300,300);
(3)使用video