JavaScript canvas implements graphics and text with shadows

Use canvas to create graphics and text with shadows for your reference. The specific contents are as follows

ctx.shadowBlur=20; Set the shadow blur range.
ctx.shadowColor; Sets the shadow blur color.

You can also use

The shadowOffsetX property sets the horizontal distance between the shadow and the graphic.
The shadowOffsetY property sets the vertical distance between the shadow and the graphic.

Code:

<!DOCTYPE html>
<html>
<head>
 <title>Creating graphics and text with shadows</title>
</head>
<body>
<h3 align="center">Radial gradient color</h3>
<hr>
<canvas id="myc1" width="800" height="600"></canvas>
<script type="text/javascript">
 var myc = document.getElementById("myc1"); //Draw a new canvas var ctx = myc.getContext("2d"); //Set the drawing environment to 2d
 var myg = ctx.createRadialGradient(130,200,0,130,200,90);
 //addColorStop method first parameter is the percentage in the image and second parameter is the color 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"; //Shadow color ctx.shadowBlur=20; //Shadow blur range ctx.arc(130,200,100,0,Math.PI*2); //Draw a new circle 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 bold"; //Set font size and font style ctx.shadowBlur=50; //Set shadow blur range ctx.shadowColor="yellow"; //Shadow color;
 ctx.shadowOffsetX=30; //Horizontal online offset;
 ctx.shadowOffsetY=-30; //Vertical offset downward;
 ctx.fillText("Radioactive gradient text",350,200);


</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JSP implements pop-up login box and shadow effect
WebGL three.js learning notes: shadows and object animation effects
How to use Three.js to achieve shadow effect example code
js current page login registration box, fixed div, bottom shadow example code
JS current page login registration box, fixed DIV, bottom shadow example code
js to achieve interference-free shadow effect is simple and easy to use (attached file download)
Div+JS shadow menu Microsoft used before
Research summary on using JS to achieve shadow effects of web page elements

<<: View MySQL installation information under Linux server

>>: Nginx uses Lua+Redis to dynamically block IP