简书的一概内容都是作为笔记使用,错了请斧正.
一. 阴影
w3cschool关于canvas的的说明文档中将个个属性和API做了分类.第一个部分就是一些属性的值: fillStyle,strokeStyle,shadowBlur,shadowColor,,shadowOffsetX,shadowOffsetY.
这六个属性看名字就知道是是什么意思.其中后边四个关于shadow的就是指阴影,在css3中关于box和text的shadow与这里异曲同工.
ctx.fillStyle ="#ff3366";
// 使得矩形的边有蓝色的阴影
ctx.shadowBlur =4; //阴影的宽度
ctx.shadowColor ="#00ff00"; // 阴影颜色
ctx.shadowOffsetX =10;x方向上的偏移值
ctx.shadowOffsetY =10;y方向上的偏移值
// 绘制一个矩形
ctx.fillRect(width/2-50,height/2-50,100,100);
效果图大致:
二. 渐变的使用
渐变大致分为线性渐变和放射性渐变.具体效果可以参考css3,其实差不多.
线性渐变依赖的api:createLinearGradient,addColorStop,其中一个是创建渐变,一个是添加颜色.这里需要注意的大致就是类似于c3,创建的渐变需要作为背景色或者说是背景图片使用,也就是fillStyle.
let grd = ctx.createLinearGradient(width/2-100,height/2-25,width/2+100,height/2+25); // 四个参数分别是起始的x,y坐标.
grd.addColorStop(0,"#ff6633"); // 指定位置和颜色,其中第一个参数应该在0-1之间,可以多次调用改方法
grd.addColorStop(1,"steelblue");
ctx.fillStyle = grd;
ctx.fillRect(width/2-100,height/2-25,200,50);
// 创建放射渐变
let grd = ctx.createRadialGradient();// 这里一定要添加六个完整的参数,否则会报错,分别是其实的坐标和半径
这里可以将起始坐标和半径理解为: 从哪里画一个半径为过大的圆,这样他们交集的地方渐变或者覆盖.所以如果想讲正方形完全覆盖住,坐标应为:100,150,50,100,150,100.
