HTML5 Canvas rectangle arrondi personnalisé et exemple de ligne pointillée compétences du didacticiel code_html5

WBOY

Libérer： 2016-05-16 15:49:04

original

1671 Les gens l'ont consulté

Rectangle arrondi et ligne pointillée personnalisés HTML5 Canvas (RoundedRectangle et Dash Line)

Implémente une démonstration de l'ajout de fonctions personnalisées à l'objet de dessin contextuel 2D HTML Canvas, comment dessiner des lignes pointillées et contrôler la taille de l'intervalle des lignes pointillées, et apprenez à dessiner des cercles. Coins rectangulaires.

Les fonctions natives fournies dans l'objet de dessin HTML5 Canvas n'implémentent pas les fonctions de dessin de rectangles arrondis et de lignes pointillées, mais grâce à l'Object.prototype du langage JavaScript, ces deux fonctions peuvent être ajoutées à l'objet CanvasRenderingContext2D. . L'effet de démonstration du code est le suivant :

Le code du composant fishcomponent.js est le suivant :

Copier le code

Le code est le suivant :

CanvasRenderingContext2D.prototype.roundRect =
fonction (x, y, largeur, hauteur, rayon, remplissage, trait) {
if (type de trait == " non défini ") {
trait = vrai;
}
si (type de rayon === " non défini ") {
rayon = 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 - y height); rayon x, hauteur y);
this.quadraticCurveTo(x, y hauteur, x, y hauteur - rayon);
this.lineTo(x, y radius); , x rayon, y);
this.closePath();
if (AVC) {
this.Stroke();
if (remplir) {
This. fill();
}
};
CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
// distance d'intervalle par défaut -> if (typeof pattern === " undefined") {
pattern = 5;
// calculer le delta x et le delta y
var dx = (toX - fromX
); var dy = (toY - fromY) ;
var distance = Math.floor(Math.sqrt(dx*dx dy*dy));
var dashlineInteveral = (pattern <= 0) ? /pattern);
var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern
// tracer une ligne pointillée
this.beginPath(); 🎜>for(var dl=0 ; dlif(dl%2) {
this.lineTo(fromX dl*deltax, fromY dl*deltay
} else {
this.moveTo(fromX dl*deltax, fromY dl*deltay);
}
}
this.stroke();

Appeler démo en HTML :

Copier le code

Le code est le suivant :

< !DOCTYPE html> http-equiv="Content-type" content= "text/html;charset=UTF-8">

Démo de rectangle arrondi en toile