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>

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

以上是 JavaScript canvas实现带有阴影的图形和文字 的全部内容, 来源链接: utcz.com/p/219768.html

回到顶部