Introduction à un exemple de code de rectangle arrondi personnalisé et de ligne pointillée HTML5 Canvas-Tutoriel H5-php.cn

Introduction à un exemple de code de rectangle arrondi personnalisé et de ligne pointillée HTML5 Canvas

黄舟

Libérer： 2017-03-03 15:58:27

original

2959 Les gens l'ont consulté

Rectangle arrondi et ligne de tiret personnalisés HTML5 Canvas (RoundedRectangle et Dash Line)

Implémenter une démonstration de l'ajout de fonctions personnalisées à l'objet de dessin de contexte HTML Canvas 2D Comment faire. dessinez des lignes pointillées

et contrôlez la taille de l'intervalle des lignes pointillées, et apprenez les compétences nécessaires pour dessiner des rectangles arrondis.

Les fonctions natives fournies dans l'objet de dessin HTML5 Canvas n'implémentent pas la fonction de dessiner des rectangles arrondis et des lignes pointillées, mais

à travers le Objet du langage JavaScript .prototype peut ajouter ces deux fonctions à l'objet CanvasRenderingContext2D. L'effet de démonstration du code est le suivant :

Le code du composant fishcomponent.js est le suivant :

Démo appelant en 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();
};

Copier après la connexion

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

Copier après la connexion

Ce qui précède est l'exemple de code d'introduction du rectangle arrondi et de la ligne pointillée personnalisés HTML5 Canvas. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php. .cn) !