canvas（3）阴影和渐变

本文主要是介绍canvas（3）阴影和渐变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

（1）阴影

var drawing = document.getElementById('drawing');if(drawing.getContext){//获取绘图的上下文var context  = drawing.getContext('2d');//设置阴影context.shadowOffsetX = 5;context.shadowOffsetY = 5;context.shadowBlur = 4;context.shadowColor = 'rgba(0,0,0,0.5)';//绘制红色矩形context.fillStyle = '#ff0000';context.fillRect(10,10,50,50);//绘制蓝色矩形context.fillStyle = 'rgba(0,0,255,1)';context.fillRect(30,30,50,50);}

（2）渐变

线性渐变：

var drawing = document.getElementById('drawing');if(drawing.getContext){//获取绘图的上下文var context  = drawing.getContext('2d');//线性渐变var gradient = context.createLinearGradient(30,30,70,70);gradient.addColorStop(0,'white');gradient.addColorStop(1,'black');//绘制红色矩形context.fillStyle = '#ff0000';context.fillRect(10,10,50,50);//绘制渐变矩形context.fillStyle = gradient;context.fillRect(30,30,50,50);}

效果图：

径向渐变：

 var drawing = document.getElementById('drawing');if(drawing.getContext){//获取绘图的上下文var context  = drawing.getContext('2d');//径向渐变var gradient = context.createRadialGradient(55,55,10,55,55,30);gradient.addColorStop(0,'white');gradient.addColorStop(1,'black');//绘制红色矩形context.fillStyle = '#ff0000';context.fillRect(10,10,50,50);//绘制渐变矩形context.fillStyle = gradient;context.fillRect(30,30,50,50);}

这篇关于canvas（3）阴影和渐变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---