JavaScript canvas实现带有阴影的图形和文字

用canvas创建带有阴影的图形和文字，供大家参考，具体内容如下

ctx.shadowBlur=20; 设置阴影模糊范围。
ctx.shadowColor; 设置阴影模糊颜色。

还可以利用

shadowOffsetX属性设置阴影与图形的水平距离。
shadowOffsetY属性设置阴影与图形的垂直距离。

代码：

!DOCTYPE htML>
    html>
    head>
     tITle>
    创建带有阴影的图形和文字/title>
    /head>
    body>
    h3 align="center">
    放射状渐变色/h3>
    hr>
    canvas id="myc1" width="800" height="600">
    /canvas>
    script type="text/javascript">
     VAR myc = document.getElementById("myc1");
    //绘制一个新画布 var ctx = myc.getContext("2d");
     //设置绘图环境为2d var myg = ctx.createRadialGradient(130,200,0,130,200,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="black";
     //阴影颜色 ctx.shadowBlur=20;
     //阴影模糊范围 ctx.arc(130,200,100,0,Math.PI*2);
     //绘制一个新圆 ctx.fill();
     ctx.beginPath();
     var myg1 = ctx.createRadialGradient(550,250,50,550,250,200);
     myg1.addColorStop(0,"blue");
     myg1.addColorStop(0.6,"green");
     myg1.addColorStop(1,"red");
     ctx.fillStyle=myg1;
      ctx.font="50px 黑体";
     //设置字体大小和字体样式 ctx.shadowBlur=50;
     //设置阴影模糊范围 ctx.shadowColor="yellow";
    //阴影颜色； ctx.shadowOffsetX=30;
     //水平方向网上偏移； ctx.shadowOffsetY=-30;
    //垂直方向往下偏移； ctx.fillText("放射性渐变文字",350,200);
    /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JSP实现弹出登陆框以及阴影效果
• WebGL three.js学习笔记之阴影与实现物体的动画效果
• 利用Three.js如何实现阴影效果实例代码
• js当前页面登录注册框,固定div,底层阴影的实例代码
• JS当前页面登录注册框,固定DIV,底层阴影的实例代码
• js 实现无干扰阴影效果 简单好用（附文件下载）
• Div+Js实现的带阴影菜单 微软以前网站曾用过
• 用JS实现网页元素阴影效果的研究总结

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！