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>

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论