Commentaire: Dans HTML5, je pense que la chose la plus importante est de présenter une toile, afin que nous puissions dessiner divers graphiques sur le Web, et Canvas est un dessin basé sur des pixels. Canvas est un nœud HTML équivalent à un artboard, nous devons dessiner avec JS
Dans HTML5, je pense que la chose la plus importante est d'introduire une toile, afin que nous puissions dessiner divers graphiques sur le Web. Cela donne aux gens le sentiment d'être un peu flou à cet égard. Dans le Web HTML5, il existe également des dessins basés sur XML tels que VML et SVG. Canvas est un dessin basé sur des pixels. Canvas est un nœud HTML équivalent à un artboard, et nous devons dessiner dans JS.comme suit:
<canvas id = myCanvas width = 600 height = 300> Votre navigateur ne prend pas en charge la définition </ canvas>.
Nous pouvons obtenir l'objet Canvas comme var c = document.getElementById (myCanvas); Sa méthode d'attribut JS doit être répertoriée comme suit:
1: dessinez l'objet rendu, C.GetContext (2D), obtenez l'objet de dessin 2D. Peu importe combien de fois nous appelons l'objet, l'objet sera le même objet.
2: Méthode de dessin:
Clecrrect (gauche, haut, largeur, hauteur) efface la zone rectangulaire définie,
Fillrect (gauche, haut, largeur, hauteur) dessine le rectangle et le remplit de style rempli.
FillText (texte, x, y) dessine du texte;
Starekect (gauche, haut, largeur, hauteur) dessine le rectangle et puise la frontière avec Strokestyle.
BeginPath (): Activez le dessin du chemin et réinitialisez le chemin vers l'état initial;
ClosePath (): dessiner les extrémités du chemin du chemin, il tirera un intervalle fermé et ajoutera une courbe fermée de la position de départ à la coordonnée de courant;
MOVETO (X, Y): Définissez les coordonnées réelles du dessin.
lineto (x, y); dessine une ligne droite de la position actuelle à x, y.
rempli (), tram (), clip (): le dernier aperçu et contour de la limite qui est fini de dessin, zone de clip.
arc (): dessinez l'arc, la position centrale, le rayonne de démarrage et la fin de Radian pour spécifier la position et la taille de l'arc;
rect (): chemin rectangulaire;
DrawImage (IMAG IMG): dessiner des images;
quadraticcurveto (): chemin de spline quadratique, paramètre deux points de contrôle;
BezierCurveto (): courbe de Bezier, trois points de contrôle des paramètres;
CreateImagedata, getImagedata, putImagedata: est les données de pixels dans le toile. Imagedata est la largeur d'enregistrement, la hauteur et les données de données, où les données sont l'enregistrement de notre pigment comme
Argb, donc la longueur de taille du tableau est largeur * hauteur * 4, et l'ordre est respectivement RGBA. GetImagedata est d'obtenir les pixels de la zone rectangulaire, et les putImagedata consistent à régler les pixels de la zone rectangulaire;
… et ainsi de suite!
3: Transformation des coordonnées:
traduire (x, y): traduction, l'origine passe aux coordonnées (x, y);
rotation (a): transformation de rotation, angle de rotation d'un degré;
Échelle (x, y): transformation de mise à l'échelle;
sauver (), restaurer (): fournit et une pile, enregistrer et restaurer l'état de dessin, SAVE pousse l'état de dessin actuel dans la pile, restaure la pile et restaure l'état de dessin;
… et ainsi de suite!
Ok, il est trop tard. J'ai joint mon code de test:
<html>
<adal>
</ head>
<body>
<Alevas> Votre navigateur ne le prend pas en charge </ Canvas>
<script type = "text / javascript">
Var Largeur, hauteur, en haut, à gauche;
largeur = hauteur = 100;
top = gauche = 5;
var x = 10;
var y = 10;
var c = document.getElementById ("myCanvas");
var maxwidth = c.width-5;
var maxheight = c.height-5;
var cxt = c.getContext ("2d");
cxt.strokestyle = "# 00f";
cxt.strokect (0,0, C.Width, C.Height);
var img = new image ();
img.src = "1.gif";
var myInterval = null;
commencer();
Fonction Refresh () {
cxt.Clearrect (gauche, haut, largeur, hauteur);
if ((gauche + x)> (maxwidth-width) || gauche + x <0) {
x = -x;
}
if ((top + y)> (maxheight-height) || top + y <0) {
y = -y;
}
gauche = gauche + x;
top = top + y;
cxt.DrawImage (img, gauche, haut, largeur, hauteur);
cxt.font = "20pt Songyi";
cxt.fillText ("Breaking Wolf", gauche, haut + 25);
}
fonction start () {
if (myInterval == null) {
MyInterval = setInterval ("Refresh ()", 100);
}
}
fonction stop () {
if (myInterval! = null) {
ClearInterval (MyInterval);
MyInterval = null;
}
}
fonction inrectangle (x, y, rectx, recty, rwidth, rheight) {
return (x> = rectx && x <= rectx + rwidth) && (y> = recty && y <= recty + rheight)
}
c.onMouseOver = fonction (e) {
if (inrectangle (e.clientx, e.clienty, gauche, haut, largeur, hauteur)) {
arrêt();
}
c.onMouseout = fonction (e) {
commencer();
}
c.onMouseMove = fonction (e) {
if (inrectangle (e.clientx, e.clienty, gauche, haut, largeur, hauteur)) {
if (myInterval! = null) {
arrêt();
}
}autre{
commencer();
}
}
}
</cript>
</docy>
</html>