HTML5 Canvas(7) 渐变

var context = document.getElementById("myCanvas").getContext("2d");

context.save();
context.shadowBlur = 20; //模糊值
context.shadowOffsetX = 10; //阴影向X偏移量
context.shadowOffsetY = 10; //阴影向Y偏移量
context.shadowColor = "blue"; //阴影颜色
//context.shadowColor = "rgba(255,0,0,0.8)"; //也可以设置透明色
context.fillRect(10, 10, 100, 100);

//画一个带红色阴影的圆
context.shadowColor = "red";
context.shadowBlur = 50;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.beginPath();
context.arc(200, 60, 50, 0, Math.PI * 2, false);
context.fill();

context.restore();
//线性渐变
var x = 10, y = 150, height = 100, width = 100;
//createLinearGradient创建渐变色，起始点和结束点，画布不在这个范围内的不会有渐变效果
var gradient1 = context.createLinearGradient(x, y, x, y + height);
//增加渐变控制点
gradient1.addColorStop(0, "red");
gradient1.addColorStop(1, "green");
context.fillStyle = gradient1;
context.fillRect(x, y, width, height);

//放射渐变原理是对连接2个圆圆周的椎体
var x0 = 300, y0 = 300, r0 = 10, x1 = 100, y1 = 100, r1 = 50;
var gradient2 = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
gradient2.addColorStop(0, "red");
gradient2.addColorStop(1, "blue");
context.fillStyle = gradient2;
//context.globalCompositeOperation = "copy";
context.fillRect(0, 0, 500, 500);

//一般放射效果
x0 = x1 = 300, y0 = y1 = 300;
var gradient3 = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
gradient3.addColorStop(0, "white");
gradient3.addColorStop(1, "black");
context.fillStyle = gradient3;
context.fillRect(x0 - 25, y0 - 25, 50, 50);