Maison > interface Web > Tutoriel H5 > le corps du texte

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


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal