介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; title>创建带有阴影的图形和文字& lt;/title>
& lt;/head>
& lt; body>
& lt; h4 对齐=癱enter"祝辞放射状渐变色& lt;/h4>
& lt; hr>
& lt; canvas id=癿yc1",宽度=?00“,身高=?00“祝辞& lt;/canvas>
& lt; script 类型=拔谋?javascript"比;
,var myc =, . getelementbyid (“myc1");//绘制一个新画布
,var ctx =, myc.getContext (“2 d");,//设置绘图环境为2 d
,var myg =, ctx.createRadialGradient (130200、0130200、90);
,//addColorStop方法,第一个参数为图像内的百分比,第二个参数为颜色
,myg.addColorStop (0,“white");
,myg.addColorStop (0.5,“pink");,
,myg.addColorStop (0.6,“green");
,myg.addColorStop (0.4,“blue");
,ctx.fillStyle=myg;
,ctx.shadowColor=癰lack",,//阴影颜色
,ctx.shadowBlur=20;//阴影模糊范围
,ctx.arc (130200100 0 Math.PI * 2),,//绘制一个新圆
,ctx.fill ();
,ctx.beginPath ();
,var myg1 =, ctx.createRadialGradient (550250、50550250200);
,myg1.addColorStop (0,“blue");
,myg1.addColorStop (0.6,“green");
,myg1.addColorStop (1,“red");
,ctx.fillStyle=myg1;
,ctx.font=?0 px 黑体“,,//设置字体大小和字体样式
,ctx.shadowBlur=50;//设置阴影模糊范围
,ctx.shadowColor=皔ellow"//阴影颜色;
,ctx.shadowOffsetX=30;//水平方向网上偏移;
,ctx.shadowOffsetY=-30;//垂直方向往下偏移;
,ctx.fillText(“放射性渐变文字“,350200);
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍JavaScript中帆布如何实现带有阴影的图形和文字,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
ctx.shadowBlur=20;设置阴影模糊范围。
ctx.shadowColor;设置阴影模糊颜色。
还可以利用
<强> shadowOffsetX属性设置阴影与图形的水平距离。
<强> shadowOffsetY属性设置阴影与图形的垂直距离。
代码:
以上是“JavaScript中帆布如何实现带有阴影的图形和文字”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
