Heim  >  Artikel  >  Web-Frontend  >  Einführung in den benutzerdefinierten HTML5 Canvas-Code für abgerundete Rechtecke und gepunktete Linien

Einführung in den benutzerdefinierten HTML5 Canvas-Code für abgerundete Rechtecke und gepunktete Linien

黄舟
黄舟Original
2017-03-03 15:58:272960Durchsuche

Benutzerdefiniertes abgerundetes HTML5-Canvas-Rechteck und gestrichelte Linie (RoundedRectangle und Dash Line)

Implementieren Sie eine Demonstration des Hinzufügens benutzerdefinierter Funktionen zum HTML Canvas 2D-Kontextzeichnungsobjekt Zeichnen Sie gepunktete Linien

und steuern Sie die Intervallgröße gepunkteter Linien und erlernen Sie die Fähigkeiten zum Zeichnen abgerundeter Rechtecke.

Die im HTML5-Canvas-Zeichenobjekt bereitgestellten nativen Funktionen implementieren nicht die Funktion zum Zeichnen abgerundeter Rechtecke und gepunkteter Linien, sondern

durch die Ein Objekt der JavaScript-Sprache .prototype kann diese beiden Funktionen zum Objekt CanvasRenderingContext2D hinzufügen. Der Demonstrationseffekt des Codes ist wie folgt:

Der Code der Komponente fishcomponent.js lautet wie folgt:

Demo-Aufruf in HTML:

CanvasRenderingContext2D.prototype.roundRect =
	function(x, y, width, height, radius, fill, stroke) {
		if (typeof stroke == "undefined") {
			stroke = true;
		}
		if (typeof radius === "undefined") {
			radius = 5;
		}
		this.beginPath();
		this.moveTo(x + radius, y);
		this.lineTo(x + width - radius, y);
		this.quadraticCurveTo(x + width, y, x + width, y + radius);
		this.lineTo(x + width, y + height - radius);
		this.quadraticCurveTo(x + width, y + height, x + width - radius, y+ height);
		this.lineTo(x + radius, y + height);
		this.quadraticCurveTo(x, y + height, x, y + height - radius);
		this.lineTo(x, y + radius);
		this.quadraticCurveTo(x, y, x + radius, y);
		this.closePath();
		if (stroke) {
			this.stroke();
		}
		if (fill) {
			this.fill();
		}
};

CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
	// default interval distance -> 5px
	if (typeof pattern === "undefined") {
		pattern = 5;
	}

	// calculate the delta x and delta y
	var dx = (toX - fromX);
	var dy = (toY - fromY);
	var distance = Math.floor(Math.sqrt(dx*dx + dy*dy));
	var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern);
	var deltay = (dy/distance) * pattern;
	var deltax = (dx/distance) * pattern;
	
	// draw dash line
	this.beginPath();
	for(var dl=0; dl<dashlineInteveral; dl++) {
		if(dl%2) {
			this.lineTo(fromX + dl*deltax, fromY + dl*deltay);
		} else {    				
			this.moveTo(fromX + dl*deltax, fromY + dl*deltay);    				
		}    			
	}
	this.stroke();
};

<!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 Rounded Rectangle Demo</title>
<script src="fishcomponent.js"></script>
<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;);
			context.strokeStyle="red";
			context.fillStyle="RGBA(100,255,100, 0.5)";
			context.roundRect(50, 50, 150, 150, 5, true);
			context.strokeStyle="blue";								
			for(var i=0; i<10; i++) {
				var delta = i*20;
				var pattern = i*2+1;
				context.dashedLineTo(250, 50+delta, 550, 50+delta, pattern);
			}
		}
	</script>
</head>
<body>
	<h1>HTML5 Canvas Dash-line Demo - By Gloomy Fish</h1>
	<pre class="brush:php;toolbar:false">Dash line and Rounded Rectangle

Das Obige ist die Codebeispieleinführung des benutzerdefinierten abgerundeten Rechtecks ​​und der gepunkteten Linie von HTML5 Canvas. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php .cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn