Demonstration der HTML5-Canvas-Shadow-Nutzung und Codedetails-H5-Tutorial-php.cn

Demonstration der HTML5-Canvas-Shadow-Nutzung und Codedetails

黄舟

Freigeben： 2017-03-03 16:02:20

Original

1734 Leute haben es durchsucht

Demonstration zur Verwendung von HTML5 Canvas-Schatten

HTML5 Canvas bietet vier Attributwerte zum Festlegen von Schatten:

context.shadowColor = „red“ bedeutet, die Schattenfarbe auf Rot zu setzen

context.shadowOffsetX = 0 bedeutet den horizontalen Abstand des Schattens relativ zu TEXT, 0 bedeutet die horizontale Position der beiden Koinzidenz

context.shadowOffsetY = 0 gibt den vertikalen Abstand des Schattens relativ zu TEXT an, 0 gibt an, dass die vertikalen Positionen der beiden zusammenfallen

context.shadowBlur = 10 Schattenunschärfeeffekt, je größer der Wert, desto stärker die Unschärfe.

Ein einfacher Rechteckcode mit Schatten lautet wie folgt:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Schattentext:

Legen Sie einfach die Werte von ShadowOffsetX und ShadowOffsetY fest. Wenn beide Werte positiv sind, ist der Schatten relativ zur unteren rechten Ecke des Textes

Quadratischer Versatz. Wenn alle Werte negativ sind, wird der Schatten relativ zur oberen linken Ecke des Textes versetzt.

3D-Schatteneffekt:

Wiederholt Text an derselben Position zeichnen und dabei den Wert von „shadowOffsetX“, „shadowOffsetY“ und „shadowBlur“ ändern von

nimmt im Offset von klein nach groß weiter zu und auch die Transparenz nimmt zu. Sie erhalten den Schatteneffekttext.

Text mit Kantenunschärfeeffekt:

Wiederholen Sie den Vorgang basierend auf dem 3D-Schatteneffekt von Es wird ein Kantenverlauf erzielt.

Bedieneffekt:

Programmcode:

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

Nach dem Login kopieren

Das Obige ist die Demonstration der Verwendung von HTML5 Canvas Shadow und Codedetails. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!