Canvas est une balise qui nous permet de dessiner à l'aide de scripts, qui fournit un ensemble complet de propriétés et de méthodes. Nous pouvons l'utiliser pour réaliser le dessin graphique, le traitement d'images et même une animation simple et une production de jeu.
La balise Canvas n'a que deux attributs: la largeur et la hauteur, qui sont utilisées pour définir la largeur et la hauteur de la toile. S'il n'est pas défini via l'attribut ou le script de balise, la valeur par défaut est 300 * 150;
D'accord, arrêtons ici pour l'introduction de toile. Jetons un coup d'œil au code de recadrage de JavaScript combinant le toile pour implémenter des images:
La copie de code est la suivante:
var selectObj = null;
Function ImageCrop (Canvasid, imagesource, x, y, largeur, hauteur) {
var canvas = $ ("#" + canvasid);
if (canvas.length == 0 && imagesource) {
retour;
}
Fonction surmontedown (e) {
StopSelect (e);
canvas.css ("curseur", "par défaut");
}
fonction canvasmousmove (e) {
var canvasoffset = canvas.offset ();
var pagex = e.pagex || event.TargetTouches [0] .Pagex;
var pagey = e.pagey || event.TargetTouches [0] .Pagey;
imousex = math.floor (pagex - canvasoffset.left);
imousey = math.floor (pagey - canvasoffset.top);
canvas.css ("curseur", "par défaut");
if (selectObj.bdragall) {
canvas.css ("curseur", "déplacer");
canvas.data ("drag", true);
var cx = imousex - selectObj.px;
cx = cx <0? 0: CX;
mx = ctx.canvas.width - selectObj.w;
cx = cx> mx? MX: CX;
selectObj.x = cx;
var cy = imousey - selectObj.py;
cy = cy <0? 0: CY;
mon = ctx.canvas.height - selectObj.h;
cy = cy> mon? mon: cy;
selectObj.y = cy;
}
pour (var i = 0; i <4; i ++) {
selectObj.bhow [i] = false;
selectObj.icSize [i] = selectObj.csize;
}
// planant sur les cubes de redimensionnement
if (imousex> selectObj.x - selectObj.csizeh && imousex <lelectObj.x + selectObj.csizeh &&
imousey> selectObj.y - selectObj.csizeh && imousey <lelectObj.y + selectObj.csizeh) {
canvas.css ("curseur", "pointeur");
selectObj.bhow [0] = true;
selectObj.icSize [0] = selectObj.csizeh;
}
if (imousex> selectObj.x + selectObj.w - selectObj.csizeh && imousex <lelectObj.x + selectObj.w + selectObj.csizeh &&
imousey> selectObj.y - selectObj.csizeh && imousey <lelectObj.y + selectObj.csizeh) {
canvas.css ("curseur", "pointeur");
selectObj.bhow [1] = true;
selectObj.icSize [1] = selectObj.csizeh;
}
if (imousex> selectObj.x + selectObj.w - selectObj.csizeh && imousex <lelectObj.x + selectObj.w + selectObj.csizeh &&
imousey> selectObj.y + selectObj.h - selectObj.csizeh && imousey <lelectObj.y + selectObj.h + selectObj.csizeh) {
canvas.css ("curseur", "pointeur");
selectObj.bhow [2] = true;
selectObj.icSize [2] = selectObj.csizeh;
}
if (imousex> selectObj.x - selectObj.csizeh && imousex <lelectObj.x + selectObj.csizeh &&
imousey> selectObj.y + selectObj.h - selectObj.csizeh && imousey <lelectObj.y + selectObj.h + selectObj.csizeh) {
canvas.css ("curseur", "pointeur");
selectObj.bhow [3] = true;
selectObj.icSize [3] = selectObj.csizeh;
}
if (imousex> selectObj.x && imousex <lelectObj.x + selectObj.w && imousey> selectObj.y && imousey <lelectObj.y + selectObj.h) {
canvas.css ("curseur", "déplacer");
}
// en cas de traînée de cubes de redimension
var ifw, ifh, ifx, ify, mx, mon;
if (selectObj.bdrag [0]) {
ifx = imousex - selectObj.px;
ify = imousey - selectObj.py;
ifw = selectObj.w + selectObj.x - ifx;
ifh = selectObj.h + selectObj.y - ify;
canvas.data ("drag", true);
}
if (selectObj.bdrag [1]) {
ifx = selectObj.x;
ify = imousey - selectObj.py;
ifw = imousex - selectObj.px - ifx;
ifh = selectObj.h + selectObj.y - ify;
canvas.data ("drag", true);
}
if (selectObj.bdrag [2]) {
ifx = selectObj.x;
ify = selectObj.y;
ifw = imousex - selectObj.px - ifx;
ifh = imousey - selectObj.py - ify;
canvas.data ("drag", true);
}
if (selectObj.bdrag [3]) {
ifx = imousex - selectObj.px;
ify = selectObj.y;
ifw = selectObj.w + selectObj.x - ifx;
ifh = imousey - selectObj.py - ify;
canvas.data ("drag", true);
}
if (ifw> selectObj.csizeh * 2 && ifh> selectObj.csizeh * 2) {
selectObj.w = ifw;
selectObj.h = ifh;
selectObj.x = ifx;
selectObj.y = ify;
}
drawScene ();
}
fonction canvasmouseout () {
$ (canvas) .trigger ("mouseup");
}
fonction canvasmouseup () {
selectObj.BDragall = false;
pour (var i = 0; i <4; i ++) {
selectObj.bdrag [i] = false;
}
canvas.css ("curseur", "par défaut");
canvas.data ("select", {
x: selectObj.x,
y: selectObj.y,
W: selectObj.w,
H: selectObj.h
});
selectObj.px = 0;
selectObj.py = 0;
}
Sélection de fonction (x, y, w, h) {
this.x = x; // Positions initiales
this.y = y;
this.w = w; // et taille
this.h = h;
this.px = x; // Variables supplémentaires vers les calculs de traînée
this.py = y;
this.csize = 4; // redimensionner la taille des cubes
this.csizeh = 6; // redimensionner la taille des cubes (sur planant)
this.bhow = [false, false, false, false]; // en survol des statuts
this.icSize = [this.csize, this.csize, this.csize, this.csize]; // redimensionner les tailles de cubes
this.bdrag = [false, false, false, false]; // glisser les statuts
this.bdragall = false; // Faites glisser une sélection entière
}
Sélection.prototype.draw = function () {
ctx.strokestyle = '# 666';
ctx.linewidth = 2;
ctx.strokect (this.x, this.y, this.w, this.h);
// dessiner une partie de l'image originale
if (this.w> 0 && this.h> 0) {
ctx.DrawImage (image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// dessine des cubes de redimensionnement
ctx.fillStyle = '# 999';
ctx.fillrect (this.x - this.icsize [0], this.y - this.icsize [0], this.icSize [0] * 2, this.icsize [0] * 2);
ctx.fillrect (this.x + this.w - this.icsize [1], this.y - this.icsize [1], this.icsize [1] * 2, this.icsize [1] * 2);
ctx.fillrect (this.x + this.w - this.icsize [2], this.y + this.h - this.icsize [2], this.icsize [2] * 2, this.icsize [2] * 2);
ctx.fillrect (this.x - this.icsize [3], this.y + this.h - this.icsize [3], this.icsize [3] * 2, this.icsize [3] * 2);
};
var drawscene = function () {
ctx.clearrect (0, 0, ctx.canvas.width, ctx.canvas.height); // toile claire
// dessiner une image source
ctx.DrawImage (image, 0, 0, ctx.canvas.width, ctx.canvas.height);
// et rendre plus sombre
ctx.fillStyle = 'rgba (0, 0, 0, 0,5)';
ctx.fillrect (0, 0, ctx.canvas.width, ctx.canvas.height);
// dessine la sélection
selectObj.Draw ();
Canvas.Moudown (CanvasmoEdown);
Canvas.on ("Touchstart", CanvasmousDown);
};
var createSelection = function (x, y, largeur, hauteur) {
var content = $ ("# imagepreview");
x = x || Math.ceil ((contenu.width () - largeur) / 2);
y = y || Math.ceil ((contenu.height () - hauteur) / 2);
retourner une nouvelle sélection (x, y, largeur, hauteur);
};
var ctx = canvas [0] .getContext ("2d");
var imousex = 1;
var imousey = 1;
var image = new image ();
image.onload = function () {
selectObj = createSelection (x, y, largeur, hauteur);
canvas.data ("select", {
x: selectObj.x,
y: selectObj.y,
W: selectObj.w,
H: selectObj.h
});
drawScene ();
};
image.src = imagesource;
canvas.mousmove (canvasmousmove);
Canvas.on ("TouchMove", CanvasmousMove);
var stopSelect = fonction (e) {
var canvasoffset = $ (canvas) .offset ();
var pagex = e.pagex || event.TargetTouches [0] .Pagex;
var pagey = e.pagey || event.TargetTouches [0] .Pagey;
imousex = math.floor (pagex - canvasoffset.left);
imousey = math.floor (pagey - canvasoffset.top);
selectObj.px = imousex - selectObj.x;
selectObj.py = imousey - selectObj.y;
if (selectObj.bhow [0]) {
selectObj.px = imousex - selectObj.x;
selectObj.py = imousey - selectObj.y;
}
if (selectObj.bhow [1]) {
selectObj.px = imousex - selectObj.x - selectObj.w;
selectObj.py = imousey - selectObj.y;
}
if (selectObj.bhow [2]) {
selectObj.px = imousex - selectObj.x - selectObj.w;
selectObj.py = imousey - selectObj.y - selectObj.h;
}
if (selectObj.bhow [3]) {
selectObj.px = imousex - selectObj.x;
selectObj.py = imousey - selectObj.y - selectObj.h;
}
if (imousex> selectObj.x + selectObj.csizeh &&
imousex <lelectObj.x + selectObj.w - selectObj.csizeh &&
imousey> selectObj.y + selectObj.csizeh &&
iMousey <lelectObj.y + selectObj.h - selectObj.csizeh) {
selectObj.BDragall = true;
}
pour (var i = 0; i <4; i ++) {
if (selectObj.bhow [i]) {
selectObj.bdrag [i] = true;
}
}
};
canvas.mouseout (canvasmouseout);
canvas.mouseup (canvasmouseup);
canvas.on ("Touchend", canvasmouseup);
this.getImageData = fonction (aperviewId) {
var tmpCanvas = $ ("<canvas> </ canvas>") [0];
var tmpctx = tmpcanvas.getContext ("2d");
if (tmpCanvas && selectObj) {
tmpcanvas.width = selectObj.w;
tmpcanvas.height = selectObj.h;
tmpctx.DrawImage (image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
if (document.getElementById (préviewid)) {
document.getElementById (préviewId) .src = tmpCanvas.todataurl ();
Document.getElementById (aperviewId) .Style.Border = "1PX solide #ccc";
}
retour tmpcanvas.todataurl ();
}
};
}
fonction autoreSizeImage (maxwidth, maxheight, objimg) {
var img = new image ();
img.src = objimg.src;
var hratio;
var wratio;
rapport var = 1;
var w = objimg.width;
var h = objimg.height;
wratio = maxwidth / w;
hratio = maxheight / h;
if (w <maxwidth && h <maxheight) {
retour;
}
if (maxwidth == 0 && maxheight == 0) {
rapport = 1;
} else if (maxwidth == 0) {
if (hratio <1) {
rapport = hratio;
}
} else if (maxheight == 0) {
if (wratio <1) {
rapport = wratio;
}
} else if (wratio <1 || hratio <1) {
rapport = (wratio <= hratio? wratio: hratio);
} autre {
rapport = (wratio <= hratio? wratio: hratio) - math.floor (wratio <= hratio? wratio: hratio);
}
if (ratio <1) {
if (ratio <0,5 && w <maxwidth && h <maxHeight) {
rapport = 1 - rapport;
}
w = w * ratio;
Ratio h = H *;
}
objimg.height = h;
objimg.width = w;
}
Amis, essayez-le. J'espère que vous l'aimez. Si vous avez des questions, laissez-moi un message.