Commentaire: Les fonctions natives fournies dans les objets de dessin en toile HTML5 ne réalisent pas la fonction de dessin de rectangles arronnés et de lignes pointillées. Grâce à l'objet.prototype de JavaScript, vous pouvez ajouter ces deux fonctions à l'objet CanvasRenderingContext2d. L'implémentation spécifique est la suivante. Les amis intéressés peuvent y faire référence.
HTML5 Canvas Custom Rended Rectangle and Dash Line (RoundDectangle et Dash Line)Implémentez une démonstration de l'ajout de fonctions de fonction personnalisées à l'objet de dessin de contexte HTML Canvas 2D, comment dessiner des lignes pointillé et contrôler la taille des lignes pointillées, et acquérir les compétences de dessin de rectangles arrondis.
Les fonctions natives fournies dans les objets de dessin en canevas HTML5 ne réalisent pas la fonction de dessin de rectangles arrondi et de lignes en pointillés, mais l'objet de langage JavaScript. Le prototype peut être utilisé pour ajouter ces deux fonctions à l'objet CanvasrederingContext2d. L'effet de démonstration du code est le suivant:
Le code de composant FishComponent.js est le suivant:
CanvasRenderingContext2d.prototype.roundrect =
fonction (x, y, largeur, hauteur, rayon, remplissage, trait) {
if (typeof stroke == "Undefined") {
TRAD = true;
}
if (typeof radius === "Undefined") {
rayon = 5;
}
this.beginPath ();
this.moveto (x + rayon, y);
this.lineto (x + largeur - rayon, y);
this.quadraticcurveto (x + largeur, y, x + largeur, radius y +);
this.lineto (x + largeur, y + hauteur - rayon);
this.quadraticcurveto (x + largeur, y + hauteur, x + largeur - rayon, y + hauteur);
this.lineto (x + rayon, y + hauteur);
this.quadraticcurveto (x, y + hauteur, x, y + hauteur - rayon);
this.lineto (x, y + rayon);
this.quadraticcurveto (x, y, x + rayon, y);
this.closepath ();
if (tram) {
this.stroke ();
}
if (remplir) {
this.fill ();
}
};
CanvasRenderingContext2d.prototype.dashedlineto = fonction (FromX, Fromy, Tox, Toy, Pattern) {
// Distance d'intervalle par défaut -> 5px
if (typeof motif === "Undefined") {
motif = 5;
}
// Calculez le delta X et Delta Y
var dx = (tox - fromx);
var dy = (Toy - Fromy);
var distance = math.floor (math.sqrt (dx * dx + dy * dy));
var dashlineInteteral = (motif <= 0)? Distance: (distance / motif);
var deltay = (dy / distance) * modèle;
var deltax = (dx / distance) * modèle;
// dessine la ligne de tableau de bord
this.beginPath ();
pour (var dl = 0; dl <dashlineInteveral; dl ++) {
if (dl% 2) {
this.lineto (fromx + dl * deltax, fromy + dl * deltay);
} autre {
this.moveto (fromx + dl * deltax, fromy + dl * deltay);
}
}
this.stroke ();
};
Démonstration de l'appel dans HTML:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "x-ua compatible" content = "chrome = ie8">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Demo rectangle arrondi en Canvas </TITAL>
<script src = "fishcomponent.js"> </cript>
<link href = "default.css" />
<cript>
var ctx = null; // Contexte 2D variable globale
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 non pris en charge. Veuillez installer un navigateur compatible HTML5.");
retour;
}
var context = canvas.getContext ('2d');
context.strokestyle = "Red";
context.fillStyle = "RGBA (100 255,100, 0,5)";
Context.RoundRect (50, 50, 150, 150, 5, vrai);
context.strokestyle = "bleu";
pour (var i = 0; i <10; i ++) {
var delta = i * 20;
Var Match = i * 2 + 1;
Context.Dashedlineto (250, 50 + delta, 550, 50 + delta, modèle);
}
}
</cript>
</ head>
<body>
<H1> HTML5 Demo en ligne de tableau de bord - par sombre poisson </h1>
<pre> Ligne de tableau de bord et rectangle arrondi </pre>
<div>
<lebvas> </ canvas>
</div>
</docy>
</html>