canvas的重温练习-------阴影,渐变

简书的一概内容都是作为笔记使用,错了请斧正.

一. 阴影

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.