Canvas ist ein Tag, mit dem wir mit Skripten zeichnen können, die einen vollständigen Satz von Eigenschaften und Methoden bieten. Wir können dies verwenden, um grafische Zeichnen, Bildverarbeitung und sogar einfache Animation und Spielproduktion zu realisieren.
Das Canvas -Tag verfügt nur über zwei Attribute: Breite und Höhe, mit denen die Breite und Höhe der Leinwand festgelegt werden. Wenn es nicht durch das Tag -Attribut oder das Skript eingestellt ist, beträgt der Standard 300*150;
Okay, lasst uns hier anhalten, um die Einführung von Leinwand zu erhalten. Schauen wir uns den Cropping -Code von JavaScript an, der Canvas zum Implementieren von Bildern kombiniert:
Die Codekopie lautet wie folgt:
var selectObj = null;
Funktionsimpublikum (Leinvasid, Imagesource, X, Y, Breite, Höhe) {
var canvas = $ ("#" + canvasid);
if (canvas.length == 0 && imagesource) {
zurückkehren;
}
Funktion canvasmouSedown (e) {
STAPSECT (e);
Canvas.css ("Cursor", "Standard");
}
Funktion Canvasmousemove (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 ("Cursor", "Standard");
if (selectObj.bdragall) {
Canvas.css ("Cursor", "Move");
canvas.data ("Drag", wahr);
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;
my = ctx.canvas.height - selectObj.h;
cy = cy> mein? My: cy;
selectObj.y = cy;
}
für (var i = 0; i <4; i ++) {
selectObj.bhow [i] = false;
selectObj.icsize [i] = selectObj.csize;
}
// über die Größenwürfel übergrößen
if (Imousex> selectObj.x - selectObj.csizeh && imousex <selectObj.x + selectObj.csizeh &&
Imousey> selectObj.y - selectObj.csizeh && imousey <selectObj.y + selectObj.csizeh) {
Canvas.css ("Cursor", "Zeiger");
selectObj.bhow [0] = true;
selectObj.icsize [0] = selectObj.csizeh;
}
if (Imousex> selectObj.x + selectObj.w - selectObj.csizeh && imousex <selectObj.x + selectObj.w + selectObj.csizeh &&
Imousey> selectObj.y - selectObj.csizeh && imousey <selectObj.y + selectObj.csizeh) {
Canvas.css ("Cursor", "Zeiger");
selectObj.bhow [1] = true;
selectObj.icsize [1] = selectObj.csizeh;
}
if (Imousex> selectObj.x + selectObj.w - selectObj.csizeh && imousex <selectObj.x + selectObj.w + selectObj.csizeh &&
Imousey> selectObj.y + selectObj.h - selectObj.csizeh && imousey <selectObj.y + selectObj.h + selectObj.csizeh) {
Canvas.css ("Cursor", "Zeiger");
selectObj.bhow [2] = true;
selectObj.icsize [2] = selectObj.csizeh;
}
if (Imousex> selectObj.x - selectObj.csizeh && imousex <selectObj.x + selectObj.csizeh &&
Imousey> selectObj.y + selectObj.h - selectObj.csizeh && imousey <selectObj.y + selectObj.h + selectObj.csizeh) {
Canvas.css ("Cursor", "Zeiger");
selectObj.bhow [3] = true;
selectObj.icsize [3] = selectObj.csizeh;
}
if (Imousex> selectObj.x && imousex <selectObj.x + selectObj.w && imousey> selectObj.y && imousey <selectObj.y + selectObj.h) {
Canvas.css ("Cursor", "Move");
}
// Im Falle des Ziehens von Größenwürfeln
var ifw, ifh, ifx, ify, mx, mein;
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", wahr);
}
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", wahr);
}
if (selectObj.bdrag [2]) {
ifx = selectObj.x;
ify = selectObj.y;
ifw = Imousex - selectObj.px - ifx;
ifh = Imousey - selectObj.py - ify;
canvas.data ("Drag", wahr);
}
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", wahr);
}
if (ifw> selectObj.csizeh * 2 && ifh> selectObj.csizeh * 2) {
selectObj.w = ifw;
selectObj.h = ifh;
selectObj.x = ifx;
selectObj.y = ify;
}
Drawscene ();
}
Funktion canvasumouseout () {
$ (Canvas) .Tigger ("Mauseup");
}
Funktion canvasmouseUp () {
selectObj.bdragall = false;
für (var i = 0; i <4; i ++) {
selectObj.bdrag [i] = false;
}
Canvas.css ("Cursor", "Standard");
canvas.data ("select", {
X: selectObj.x,
y: selectObj.y,,
W: selectObj.w,
H: selectObj.h
});
selectObj.px = 0;
selectObj.py = 0;
}
Funktionsauswahl (x, y, w, h) {
this.x = x; // Anfangspositionen
this.y = y;
this.w = w; // und Größe
this.h = h;
this.px = x; // zusätzliche Variablen zum Ziehen von Berechnungen
this.py = y;
this.csize = 4; // Größe der Größe der Würfel Größe
this.csizeh = 6; // Größe der Größe der Würfel Größe (bei schweber)
this.bhow = [falsch, falsch, falsch, falsch]; // Schwebstatus
this.icsize = [this.cSize, this.cSize, this.cSize, this.cSize]; // Die Größe der Größe der Würfelgrößen ändern
this.bdrag = [falsch, falsch, falsch, falsch]; // Status ziehen
this.bdragall = false; // ganze Auswahl ziehen
}
Selection.prototype.draw = function () {
ctx.strokestyle = '#666';
ctx.linewidth = 2;
ctx.strokerect (this.x, this.y, this.w, this.h);
// Teil des Originalbildes zeichnen
if (this.w> 0 && this.h> 0) {
ctx.drawimage (Bild, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// Zeichnen Sie die Größenänderung Würfel
Ctx.FillStyle = '#999';
ctx.fillRect (this.x - this.icsize [0], this.y - this.icssize [0], this.icSize [0] * 2, this.icSize [0] * 2);
Ctx.FillRect (this.x + this.w - this.icsize [1], this.y - this.icsize [1], this.ics [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); // Leinwand löschen
// Quellbild zeichnen
ctx.drawimage (Bild, 0, 0, ctx.canvas.width, ctx.canvas.height);
// und machen es dunkler
Ctx.FillStyle = 'RGBA (0, 0, 0, 0,5)';
ctx.fillRect (0, 0, ctx.canvas.width, ctx.canvas.height);
// Auswahl zeichnen
selectObj.draw ();
Canvas.MouseDown (canvasmouseDown);
Canvas.on ("TouchStart", canvasmouseDown);
};
var createsSelection = Funktion (x, y, breite, Höhe) {
var content = $ ("#imagePreview");
x = x || Math.ceil ((content.width () - width) / 2);
y = y || Math.ceil ((content.height () - Höhe) / 2);
Neue Selektion zurückgeben (x, y, width, Höhe);
};
var ctx = canvas [0] .getContext ("2D");
var Imousex = 1;
var Imousey = 1;
var image = new Image ();
Image.onload = function () {
selectObj = createsSelection (x, y, breite, Höhe);
canvas.data ("select", {
X: selectObj.x,
y: selectObj.y,,
W: selectObj.w,
H: selectObj.h
});
Drawscene ();
};
Image.src = Imagesource;
Canvas.Mousemove (leinvasmeer EMOVE);
Canvas.on ("Touchmove", Canvasmousemove);
var stopselect = function (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 <selectObj.x + selectObj.w - selectObj.csizeh &&
Imousey> selectObj.y + selectObj.csizeh &&
Imousey <selectObj.y + selectObj.h - selectObj.csizeh) {
selectObj.bdragall = true;
}
für (var i = 0; i <4; i ++) {
if (selectObj.bhow [i]) {
selectObj.bdrag [i] = true;
}
}
};
Canvas.Mouseout (CanvaMouseout);
Canvas.MouseUp (CanvasMouseUp);
Canvas.on ("Touchend", canvasuausep);
this.getImagedata = function (previewID) {
var tmpcanvas = $ ("<canvas> </canvas>") [0];
var tmpctx = tmpcanvas.getContext ("2D");
if (tmpcanvas && selectObj) {
tmpcanvas.width = selectObj.w;
tmpcanvas.height = selectObj.h;
tmpctx.drawimage (Bild, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
if (document.getElementById (previewID)) {
document.GetElementById (previewID) .src = tmpcanvas.todataurl ();
document.getElementById (previewID) .style.border = "1px solide #CCC";
}
return tmpcanvas.todataurl ();
}
};
}
Funktion Autorsesimage (MaxWidth, MaxHeight, Objimg) {
var img = new Image ();
img.src = objimg.src;
var hratio;
var wriatio;
Var -Verhältnis = 1;
var w = objimg.width;
var h = objimg.height;
WRATIO = MAXWIDTH / W;
hratio = maxheight / h;
if (w <maxwidth && h <maxheight) {
zurückkehren;
}
if (maxwidth == 0 && maxHeight == 0) {
Verhältnis = 1;
} else if (maxwidth == 0) {
if (hratio <1) {
Verhältnis = Hratio;
}
} else if (maxHeight == 0) {
if (Wratio <1) {
Verhältnis = Wratio;
}
} else if (Wratio <1 || hratio <1) {
Verhältnis = (WRATIO <= HRATIO? WRATIO: HRATIO);
} anders {
Ratio = (WRATIO <= HRATIO? WRATIO: HRATIO) - Math.Floor (WRATIO <= Hratio? Wratio: Hratio);
}
if (Verhältnis <1) {
if (Verhältnis <0,5 && w <maxwidth && h <maxheight) {
Verhältnis = 1 - Verhältnis;
}
W = W * Verhältnis;
H = H * Verhältnis;
}
objimg.height = h;
objimg.width = w;
}
Freunde, bitte versuchen Sie es. Ich hoffe es gefällt euch. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht.