Canvas adalah tag yang memungkinkan kita menggambar menggunakan skrip, yang menyediakan serangkaian properti dan metode lengkap. Kita dapat menggunakan ini untuk mewujudkan gambar grafik, pemrosesan gambar dan bahkan animasi dan produksi game sederhana.
Tag Canvas hanya memiliki dua atribut: lebar dan tinggi, yang digunakan untuk mengatur lebar dan tinggi kanvas. Jika tidak diatur melalui atribut atau skrip tag, standarnya adalah 300*150;
Oke, mari kita berhenti di sini untuk pengenalan kanvas. Mari kita lihat kode pemangkasan JavaScript yang menggabungkan kanvas untuk mengimplementasikan gambar:
Salinan kode adalah sebagai berikut:
var selectoBj = null;
Fungsi ImageCrop (Canvasid, ImageSource, X, Y, Lebar, Tinggi) {
var canvas = $ ("#" + canvasid);
if (canvas.length == 0 && imagesource) {
kembali;
}
fungsi kanvasmousedown (e) {
StopSelect (E);
canvas.css ("kursor", "default");
}
fungsi kanvasmeuseMove (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 ("kursor", "default");
if (selectoBj.bdragall) {
canvas.css ("kursor", "move");
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;
my = ctx.canvas.height - selectoBj.h;
cy = cy> my? My: cy;
selectobj.y = cy;
}
untuk (var i = 0; i <4; i ++) {
selectobj.bhow [i] = false;
selectoBj.icsize [i] = selectoBj.csize;
}
// melayang di atas ukuran ulang kubus
if (iMousex> selectObj.x - selectoBj.csizeh && imousex <silectoBj.x + selectoBj.csizeh &&
iMousey> selectoBj.y - selectoBj.csizeh && iMousey <silectoBj.y + selectoBj.csizeh) {
canvas.css ("kursor", "pointer");
SELECTOBJ.BHOW [0] = true;
selectoBj.icsize [0] = selectoBj.csizeh;
}
if (iMousex> selectObj.x + selectoBj.w - selectoBj.csizeh && imousex <sectoBj.x + selectoBj.w + selectoBj.csizeh &&
iMousey> selectoBj.y - selectoBj.csizeh && iMousey <silectoBj.y + selectoBj.csizeh) {
canvas.css ("kursor", "pointer");
SELECTOBJ.BHOW [1] = true;
selectObj.icsize [1] = selectoBj.csizeh;
}
if (iMousex> selectObj.x + selectoBj.w - selectoBj.csizeh && imousex <sectoBj.x + selectoBj.w + selectoBj.csizeh &&
iMousey> selectoBj.y + selectoBj.h - selectoBj.csizeh && imousey <selectoBj.y + selectoBj.h + selectoBj.csizeh) {
canvas.css ("kursor", "pointer");
SELECTOBJ.BHOW [2] = true;
selectoBj.icsize [2] = selectoBj.csizeh;
}
if (iMousex> selectObj.x - selectoBj.csizeh && imousex <silectoBj.x + selectoBj.csizeh &&
iMousey> selectoBj.y + selectoBj.h - selectoBj.csizeh && imousey <selectoBj.y + selectoBj.h + selectoBj.csizeh) {
canvas.css ("kursor", "pointer");
SELECTOBJ.BHOW [3] = true;
selectObj.icsize [3] = selectoBj.csizeh;
}
if (imousex> selectoBj.x && imousex <sectoBj.x + selectoBj.w && imousey> selectoBj.y && iMousey <selectoBj.y + selectoBj.h) {
canvas.css ("kursor", "move");
}
// dalam hal menyeret ulang kubus ukuran
var ifw, ifh, ifx, ify, mx, my;
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) {
sfectoBj.w = ifw;
selectobj.h = ifh;
selectobj.x = ifx;
selectoBj.y = ify;
}
drawscene ();
}
fungsi canvasmouseout () {
$ (kanvas) .trigger ("mouseup");
}
fungsi canvasmouseup () {
sfectoBj.bdragall = false;
untuk (var i = 0; i <4; i ++) {
SELECTOBJ.BDRAG [i] = false;
}
canvas.css ("kursor", "default");
canvas.data ("pilih", {
x: selectobj.x,
Y: Selectobj.y,
W: silectobj.w,
H: Selectobj.h
});
sfectoBj.px = 0;
sfectoBj.py = 0;
}
Seleksi fungsi (x, y, w, h) {
this.x = x; // posisi awal
this.y = y;
this.w = w; // dan ukuran
this.h = h;
this.px = x; // variabel tambahan untuk menyeret perhitungan
this.py = y;
this.cSize = 4; // Ubah Ukuran Ukuran Kubes
this.csizeh = 6; // Ubah Ukuran Kubes (Di Hover)
this.bhow = [false, false, false, false]; // Status melayang
this.icsize = [this.csize, this.csize, this.csize, this.csize]; // mengubah ukuran ukuran kubus
this.bdrag = [false, false, false, false]; // Status seret
this.bdragall = false; // Seret seluruh pilihan
}
Selection.prototype.draw = function () {
ctx.strokestyle = '#666';
ctx.linewidth = 2;
ctx.strokerect (this.x, this.y, this.w, this.h);
// menggambar bagian dari gambar asli
if (this.w> 0 && this.h> 0) {
ctx.drawimage (gambar, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// Gambarlah ukuran ulang kubus
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); // Bersihkan kanvas
// Gambarlah gambar sumber
ctx.drawimage (gambar, 0, 0, ctx.canvas.width, ctx.canvas.height);
// dan buat lebih gelap
ctx.fillstyle = 'rgba (0, 0, 0, 0.5)';
ctx.fillrect (0, 0, ctx.canvas.width, ctx.canvas.height);
// menggambar seleksi
selectobj.draw ();
Canvas.mousedown (kanvasmousedown);
canvas.on ("touchstart", kanvasmousedown);
};
var createSelection = function (x, y, lebar, tinggi) {
var content = $ ("#ImagePreview");
x = x || Math.ceil ((content.width () - lebar) / 2);
y = y || Math.ceil ((content.height () - height) / 2);
mengembalikan pilihan baru (x, y, lebar, tinggi);
};
var ctx = canvas [0] .getContext ("2d");
var imousex = 1;
var imousey = 1;
gambar var = gambar baru ();
image.onload = function () {
selectObj = createSelection (x, y, lebar, tinggi);
canvas.data ("pilih", {
x: selectobj.x,
Y: Selectobj.y,
W: silectobj.w,
H: Selectobj.h
});
drawscene ();
};
Image.src = ImageSource;
canvas.mousemove (kanvasmeuseMove);
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);
sfectoBj.px = imousex - selectoBj.x;
selectoBj.py = imousey - selectoBj.y;
if (selectoBj.bhow [0]) {
sfectoBj.px = imousex - selectoBj.x;
selectoBj.py = imousey - selectoBj.y;
}
if (selectoBj.bhow [1]) {
sfectoBj.px = imousex - selectoBj.x - selectoBj.w;
selectoBj.py = imousey - selectoBj.y;
}
if (selectoBj.bhow [2]) {
sfectoBj.px = imousex - selectoBj.x - selectoBj.w;
selectoBj.py = imousey - selectoBj.y - selectoBj.h;
}
if (selectoBj.bhow [3]) {
sfectoBj.px = imousex - selectoBj.x;
selectoBj.py = imousey - selectoBj.y - selectoBj.h;
}
if (imousex> selectobj.x + selectoBj.csizeh &&
IMOUSEX <SELECTEROBJ.X + SELECTOBJ.W - SELECTOBJ.CSIZEH &&
iMousey> selectoBj.y + selectoBj.csizeh &&
Imousey <sectoBj.y + selectoBj.h - selectoBj.csizeh) {
selectobj.bdragall = true;
}
untuk (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 = 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 (gambar, selectobj.x, selectobj.y, selectobj.w, selectobj.h, 0, 0, selectobj.w, selectobj.h);
if (document.geteLementById (previewIdid)) {
document.geteLementById (previewId) .src = tmpCanvas.todataurl ();
document.geteLementById (previewId) .style.border = "1px solid #ccc";
}
return tmpCanvas.todataurl ();
}
};
}
fungsi autoresizeImage (maxwidth, maxheight, objimg) {
var img = gambar baru ();
img.src = objimg.src;
var hratio;
var wratio;
rasio var = 1;
var w = objimg.width;
var h = objimg.height;
wratio = maxwidth / w;
hratio = maxheight / h;
if (w <maxwidth && h <maxheight) {
kembali;
}
if (maxwidth == 0 && maxheight == 0) {
rasio = 1;
} else if (maxwidth == 0) {
if (hratio <1) {
rasio = hratio;
}
} else if (maxheight == 0) {
if (wratio <1) {
rasio = wratio;
}
} lain if (wratio <1 || hratio <1) {
rasio = (wratio <= hratio? wratio: hratio);
} kalau tidak {
rasio = (wratio <= hratio? wratio: hratio) - math.floor (wratio <= hratio? wratio: hratio);
}
if (rasio <1) {
if (rasio <0,5 && w <maxwidth && h <maxheight) {
rasio = 1 - rasio;
}
rasio w = w *;
rasio h = h *;
}
objimg.height = h;
objimg.width = w;
}
Teman, tolong coba. Saya harap Anda menyukainya. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan.