Shulou(Shulou.com)06/03 Report--

HTML5 Canvas shadow is how to use, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

The four attribute values available in HTML5 Canvas for setting shadows are:

Context.shadowColor = "red" means to set the shadow color to red

Context.shadowOffsetX = 0 indicates the horizontal distance of the shadow relative to TEXT, and 0 indicates that the two horizontal positions coincide.

Context.shadowOffsetY = 0 indicates the vertical distance of the shadow relative to the TEXT, and 0 indicates that the two vertical positions coincide.

Context.shadowBlur = 10 Shadow blur effect, the higher the value, the more blurred.

The simplest code for a rectangle with shadow is as follows:

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.fillRect (10, hh+10, 200 canvas.heightswap 4-20)

The effect is as follows:

Shadow text:

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

Square offset. When all values are negative, the shadow is offset from the upper left of the text.

3D shadow pulling effect:

Repeatedly draw text in the same place and change shadowOffsetX, shadowOffsetY, shadowBlur at the same time

The value of, from small to large, is constantly increasing, and the transparency is also increasing. You get the text of the shadow effect.

Edge blur effect text:

On the basis of the 3D shadow effect, the text effect of edge feathering is obtained by repeating in four directions.

Running effect:

Preface code:

The code is as follows:

Canvas Clip Demo

Var ctx = null; / / global variable 2d context

Var imageTexture = null

_ window.onload = function () {

Var canvas = document.getElementById ("text_canvas")

Console.log (canvas [XSS _ clean] .clientWidth)

Canvas.width = canva [XSS _ clean] .clientWidth

Canvas.height = canva [XSS _ clean] .clientHeight

If (! canvas.getContext) {

Console.log ("Canvas not supported. Please install a HTML5 compatible browser.")

Return

}

Var context = canvas.getContext ('2d')

/ / section one-shadow and blur

Context.fillStyle= "black"

Context.fillRect (0,0, canvas.width, canvas.height/4)

Context.font = '60pt Calibri'

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 = '60pt Calibri'

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; iTunes +)

{

Context.shadowColor = "RGBA (255,255,255," + ((10muri) / 10) + ")"

Context.shadowOffsetX = iTun2

Context.shadowOffsetY = iTun2

Context.shadowBlur = iTun2

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; iTunes +)

{

Context.shadowColor = "RGBA (255,255,255," + ((10muri) / 10) + ")"

Context.shadowOffsetX = 0

Context.shadowOffsetY =-iTun2

Context.shadowBlur = iTun2

Context.fillStyle = "RGBA (127,127,127,1)"

Context.fillText ("Blur Canvas", 40, 80+hh)

}

For (var I = 0; I < 10; iTunes +)

{

Context.shadowColor = "RGBA (255,255,255," + ((10muri) / 10) + ")"

Context.shadowOffsetX = 0

Context.shadowOffsetY = iTun2

Context.shadowBlur = iTun2

Context.fillStyle = "RGBA (127,127,127,1)"

Context.fillText ("Blur Canvas", 40, 80+hh)

}

For (var I = 0; I < 10; iTunes +)

{

Context.shadowColor = "RGBA (255,255,255," + ((10muri) / 10) + ")"

Context.shadowOffsetX = iTun2

Context.shadowOffsetY = 0

Context.shadowBlur = iTun2

Context.fillStyle = "RGBA (127,127,127,1)"

Context.fillText ("Blur Canvas", 40, 80+hh)

}

For (var I = 0; I < 10; iTunes +)

{

Context.shadowColor = "RGBA (255,255,255," + ((10muri) / 10) + ")"

Context.shadowOffsetX =-iTun2

Context.shadowOffsetY = 0

Context.shadowBlur = iTun2

Context.fillStyle = "RGBA (127,127,127,1)"

Context.fillText ("Blur Canvas", 40, 80+hh)

}

}

HTML5 Canvas Clip Demo-By Gloomy Fish

Fill And Stroke Clip

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.