Home > Web Front-end > H5 Tutorial > How to draw shadow effects using HTML5 Canvas

How to draw shadow effects using HTML5 Canvas

不言
Release: 2018-07-02 11:30:15
Original
2479 people have browsed it

This article mainly introduces the method of using HTML5 Canvas to draw shadow effects, including an example of writing 3D shadow edge blur effect text, and further in-depth use of shadow effects. Friends who need it can refer to it

Creating a shadow effect requires operating the following 4 properties:

1.context.shadowColor: Shadow color.
2.context.shadowOffsetX: shadow x-axis displacement. Positive values ​​go to the right, negative values ​​go to the left.
3.context.shadowOffsetY: shadow y-axis displacement. Positive values ​​go down, negative values ​​go up.
4.context.shadowBlur: Shadow blur filter. The larger the data, the greater the spread.
As long as the first one and any one of the remaining three properties are set, the shadow effect will be achieved. But usually, all four properties must be set.

For example, to create a red shadow shifted 5px to the lower right and blurred by 2px, you can write it like this.

context.shadowColor = "red";   
context.shadowOffsetX = 5;   
context.shadowOffsetY = 5;   
context.shadowBlur= 2;
Copy after login

It should be noted that the shadow here, like other attribute settings, are state-based settings. Therefore, if you only want to apply a shadow to a certain object instead of a global shadow, you need to reset these four properties of the shadow before the next drawing.
Run result:
2016325110954383.jpg (850×500)

Shadow text:

As long as the values ​​​​of shadowOffsetX and shadowOffsetY are set, when the values ​​​​are both positive numbers , the shadow is offset relative to the lower right

of the text. When the values ​​are all negative, the shadow is offset relative to the upper left of the text.

3D shadow effect:

Repeatedly draw text at the same position while changing the values ​​of shadowOffsetX, shadowOffsetY, and shadowBlur

, from small to large As the offset continues to increase, so does the transparency. You get the shadow effect text.

Edge blur effect text:

Repeat in four directions based on the 3D shadow effect to get the edge feathering text effect.

Operation effect:
2016325111023538.jpg (472×470)

Program code:

<!DOCTYPE html>     
<html>     
<head>     
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">     
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">     
<title>Canvas Clip Demo</title>     
<link href="default.css" rel="stylesheet" />     
    <script>     
        var ctx = null; // global variable 2d context   
        var imageTexture = null;     
        window.onload = function() {     
            var canvas = document.getElementById("text_canvas");     
            console.log(canvas.parentNode.clientWidth);     
            canvas.width = canvas.parentNode.clientWidth;     
            canvas.height = canvas.parentNode.clientHeight;     
            if (!canvas.getContext) {     
                console.log("Canvas not supported. Please install a HTML5 compatible browser.");     
                return;     
            }     
            var context = canvas.getContext(&#39;2d&#39;);     
            // section one - shadow and blur   
            context.fillStyle="black";     
            context.fillRect(0, 0, canvas.width, canvas.height/4);     
            context.font = &#39;60pt Calibri&#39;;     
            context.shadowColor = "white";     
            context.shadowOffsetX = 0;     
            context.shadowOffsetY = 0;     
            context.shadowBlur = 20;     
            context.fillText("Blur Canvas", 40, 80);     
            context.strokeStyle = "RGBA(0, 255, 0, 1)";     
            context.lineWidth = 2;     
            context.strokeText("Blur Canvas", 40, 80);     
            // section two - shadow font   
            var hh = canvas.height/4;     
            context.fillStyle="white";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            context.font = &#39;60pt Calibri&#39;;     
            context.shadowColor = "RGBA(127,127,127,1)";     
            context.shadowOffsetX = 3;     
            context.shadowOffsetY = 3;     
            context.shadowBlur = 0;     
            context.fillStyle = "RGBA(0, 0, 0, 0.8)";     
            context.fillText("Blur Canvas", 40, 80+hh);     
            // section three - down shadow effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="black";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = i*2;     
                context.shadowOffsetY = i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            // section four -  fade effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="green";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = 0;     
                context.shadowOffsetY = -i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = 0;     
                context.shadowOffsetY = i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = i*2;     
                context.shadowOffsetY = 0;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = -i*2;     
                context.shadowOffsetY = 0;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
        }     
    </script>     
</head>     
<body>     
    <h1>HTML5 Canvas Clip Demo - By Gloomy Fish</h1>     
    <pre class="brush:php;toolbar:false">Fill And Stroke Clip

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's study, more related Please pay attention to the PHP Chinese website for content!

Related recommendations:

html5 touch event realizes sliding up and down the touch screen page

Place pictures and Method of saving as picture

html5 and js method of drawing picture to canvas

The above is the detailed content of How to draw shadow effects using HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template