How to use HTML5 Canvas Shadow
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.
