Canvas - это тег, который позволяет нам рисовать с помощью сценариев, который обеспечивает полный набор свойств и методов. Мы можем использовать это для реализации графического рисунка, обработки изображений и даже простой анимации и производства игры.
Тэг Canvas имеет только два атрибута: ширина и высота, которые используются для установки ширины и высоты холста. Если он не устанавливается через атрибут или сценарий тега, по умолчанию 300*150;
Хорошо, давайте остановимся здесь для введения холста. Давайте посмотрим на код обрезки JavaScript, объединяющий холст для реализации изображений:
Кода -копия выглядит следующим образом:
var selectObj = null;
Функция ImageCrop (Canvasid, ImageSource, X, Y, ширина, высота) {
var canvas = $ ("#" + canvasid);
if (canvas.length == 0 && imagesource) {
возвращаться;
}
Функция canvasmousedown (e) {
Stopselect (e);
canvas.css ("cursor", "по умолчанию");
}
функция 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", "по умолчанию");
if (selectObj.bdragall) {
canvas.css («курсор», «двигаться»);
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;
}
для (var i = 0; i <4; i ++) {
selectObj.bhow [i] = false;
selectObj.icsize [i] = selectObj.csize;
}
// парящий через кубики изменения размера
if (imousex> selectObj.x - selectObj.csizeh && imousex <selectObj.x + selectObj.csizeh &&
imousey> selectObj.y - selectObj.csizeh && imousey <selectObj.y + selectObj.csizeh) {
canvas.css («курсор», «указатель»);
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 («курсор», «указатель»);
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 («курсор», «указатель»);
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 («курсор», «указатель»);
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 («курсор», «двигаться»);
}
// В случае перетаскивания Cressize Cubes
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) {
selectObj.w = ifw;
selectObj.h = ifh;
selectObj.x = ifx;
selectObj.y = ify;
}
DrawScene ();
}
функция canovasmouseout () {
$ (Canvas) .trigger ("MouseUp");
}
функция canovasmouseUp () {
selectObj.bdragall = false;
для (var i = 0; i <4; i ++) {
selectObj.bdrag [i] = false;
}
canvas.css ("cursor", "по умолчанию");
canvas.data ("select", {
X: SELECTOBJ.X,
Y: SELECTOBJ.Y,
W: SELECTOBJ.W,
H: SELECTOBJ.H
});
selectObj.px = 0;
selectObj.py = 0;
}
Выбор функции (x, y, w, h) {
this.x = x; // начальные позиции
this.y = y;
this.w = w; // и размер
this.h = h;
this.px = x; // дополнительные переменные для перетаскивания расчетов
this.py = y;
this.csize = 4; // Изменение размера кубиков
this.csizeh = 6; // Изменение размера размер кубиков (на падении)
this.bhow = [false, false, false, false]; // Статусы Hover
this.icsize = [this.csize, this.csize, this.csize, this.csize]; // Изменение размера размеров кубиков
this.bdrag = [false, false, false, false]; // Статусы перетаскивания
this.bdragall = false; // перетаскивать весь выбор
}
Selection.prototype.draw = function () {
ctx.strokestyle = '#666';
ctx.linewidth = 2;
ctx.strokerect (this.x, this.y, this.w, this.h);
// Нарисуйте часть исходного изображения
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);
}
// рисовать изменения размерного размера
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 draitscene = function () {
ctx.clearrect (0, 0, ctx.canvas.width, ctx.canvas.height); // чистый холст
// рисовать источник изображения
ctx.drawimage (изображение, 0, 0, ctx.canvas.width, ctx.canvas.height);
// и сделать это темнее
ctx.fillstyle = 'rgba (0, 0, 0, 0,5)';
ctx.fillrect (0, 0, ctx.canvas.width, ctx.canvas.height);
// Нарисуйте выбор
selectObj.draw ();
Canvas.mousedown (CanvasmouseDown);
Canvas.on ("touchStart", CanvasmouseDown);
};
var createSelection = function (x, y, width, height) {
var content = $ ("#ImagePreview");
x = x || Math.ceil ((content.width () - ширина) / 2);
y = y || Math.ceil ((content.height () - высота) / 2);
вернуть новый выбор (x, y, ширина, высота);
};
var ctx = canvas [0] .getContext ("2d");
var imousex = 1;
var imousey = 1;
var image = new Image ();
image.onload = function () {
selectObj = createSelection (x, y, ширина, высота);
canvas.data ("select", {
X: SELECTOBJ.X,
Y: SELECTOBJ.Y,
W: SELECTOBJ.W,
H: SELECTOBJ.H
});
DrawScene ();
};
image.src = imagesource;
Canvas.mouseMove (CanvasmouseMove);
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;
}
для (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 (image, 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 solid #ccc";
}
return tmpcanvas.todataurl ();
}
};
}
Функция AutoreSizeImage (maxwidth, maxheight, objimg) {
var img = новое изображение ();
img.src = objimg.src;
var hratio;
var wratio;
соотношение var = 1;
var w = objimg.width;
var h = objimg.height;
wratio = maxwidth / w;
hratio = maxheight / h;
if (w <maxwidth && h <maxheight) {
возвращаться;
}
if (maxwidth == 0 && maxheight == 0) {
соотношение = 1;
} else if (maxwidth == 0) {
if (hratio <1) {
соотношение = hratio;
}
} else if (maxheight == 0) {
if (wratio <1) {
соотношение = wratio;
}
} else if (wratio <1 || hratio <1) {
соотношение = (wratio <= hratio? wratio: hratio);
} еще {
catio = (wratio <= hratio? wratio: hratio) - math.floor (wratio <= hratio? wratio: hratio);
}
if (соотношение <1) {
if (соотношение <0,5 && w <maxwidth && h <maxheight) {
соотношение = 1 - соотношение;
}
W = W * соотношение;
h = h * соотношение;
}
objimg.height = h;
objimg.width = w;
}
Друзья, попробуйте. Надеюсь, вам понравится. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение.