canvas阴影与渐变

Posted 2020-10-10 corn林

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

注：上例中执行代码所得矩形，粉色多于灰色，是因为矩形的起点位置位于渐变的位置的左上方。