Comments: HTML5 Canvas provides four attribute values for shadow to implement shadow text, 3D shadow effect, and edge blur effect text. The Demo code is as follows, if you want to learn more, refer to the following four attribute values in HTML5 Canvas:
Context. shadowColor = "red" indicates that the shadow color is set to red.
Context. shadowOffsetX = 0 indicates the horizontal distance between the shadow and TEXT, and 0 indicates the horizontal position of the two.
Context. shadowOffsetY = 0 indicates the vertical distance between the shadow and TEXT, and 0 indicates that the vertical positions of the two are coincident.
Context. shadowBlur = 10 shadow blur. The greater the value, the greater the Blur.
The simplest code for a shadow rectangle is as follows:
Context. shadowColor = "rgba( 127,127,127, 1 )";
Context. shadowOffsetX = 3;
Context. shadowOffsetY = 3;
Context. shadowBlur = 0;
Context. fillStyle = "RGBA (0, 0, zero, 0.8 )";
Context. fillRect (10, hh + 10,200, canvas. height/4-20 );
The effect is as follows:
Shadow text:
You only need to set the values of shadowOffsetX and shadowOffsetY. When the values are positive, the lower right corner of the Shadow text
Offset. When the value is negative, the shadow is offset to the upper-left corner of the text.
3D image pulling effect:
Repeatedly draw text at the same position and change shadowOffsetX, shadowOffsetY, and shadowBlur
And the transparency is also increasing. The text of the shadow effect is displayed.
Text with blurred edge effects:
On the basis of the 3D image pulling effect, we can repeat it in four directions to achieve the text effect of the edges.
Running effect:
Code in sequence:
The Code is as follows:
<! 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 ('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, zero, 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 <Pre> Fill And Stroke Clip </pre>
<Div id = "my_painter">
<Canvas id = "text_canvas"> </canvas>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
