Démonstration de l'utilisation de l'ombre HTML5 Canvas et détails du code-Tutoriel H5-php.cn

Démonstration de l'utilisation de l'ombre HTML5 Canvas et détails du code

黄舟

Libérer： 2017-03-03 16:02:20

original

1780 Les gens l'ont consulté

Démonstration de l'utilisation des ombres HTML5 Canvas

HTML5 Canvas fournit quatre valeurs d'attribut pour définir les ombres :

context.shadowColor = "red" signifie définir la couleur de l'ombre sur rouge

context.shadowOffsetX = 0 signifie la distance horizontale de l'ombre par rapport au TEXTE, 0 signifie la position horizontale des deux Coïncidence

context.shadowOffsetY = 0 signifie la distance verticale de l'ombre par rapport au TEXTE, 0 signifie la position verticale des deux coïncide

context.shadowBlur = 10 Effet de flou d'ombre, plus la valeur est grande, plus le flou est sévère.

Un code de rectangle le plus simple avec une ombre est le suivant :

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.height/4-20);

Copier après la connexion

L'effet est le suivant :

Texte de l'ombre :

Définissez simplement les valeurs de shadowOffsetX et shadowOffsetY Lorsque les valeurs sont toutes deux positives, l'ombre sera relative au coin inférieur droit du texte.

Décalage carré. Lorsque les valeurs sont toutes négatives, l'ombre est décalée par rapport au coin supérieur gauche du texte.

Effet d'ombre 3D :

Dessinez à plusieurs reprises du texte à la même position tout en modifiant shadowOffsetX, shadowOffsetY, shadowBlur La valeur de

continue d'augmenter en décalage de petit à grand, et la transparence augmente également. Vous obtenez le texte de l'effet d'ombre.

Texte de l'effet de flou de bord :

Répétez dans quatre directions en fonction de l'effet d'ombre 3D. un contour progressif des bords est obtenu.

Effet de course :

Code du programme :

<!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

Copier après la connexion

Ce qui précède est la démonstration de l'utilisation de l'ombre HTML5 Canvas et les détails du code. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !