캔버스는 스크립트를 사용하여 그릴 수있는 태그로, 전체 속성과 메소드 세트를 제공합니다. 이를 사용하여 그래픽 도면, 이미지 처리 및 간단한 애니메이션 및 게임 제작을 실현할 수 있습니다.
캔버스 태그에는 너비와 높이의 두 가지 속성 만 있으며 캔버스의 너비와 높이를 설정하는 데 사용됩니다. 태그 속성 또는 스크립트를 통해 설정되지 않은 경우 기본값은 300*150입니다.
좋아, 캔버스 소개를 위해 여기서 멈추자. 캔버스를 결합하여 자바 스크립트의 자르기 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var selectObj = null;
함수 imageCrop (canvasid, imagesource, x, y, 너비, 높이) {
var canvas = $ ( "#" + canvasid);
if (canvas.length == 0 && imagesource) {
반품;
}
기능 캔버스 구조 (e) {
stopSelect (e);
canvas.css ( "커서", "기본값");
}
함수 캔버스 러브 (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 ( "커서", "기본값");
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> 내? 나의 : cy;
selectObj.y = cy;
}
for (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 ( "커서", "움직임");
}
// 크기 조정 큐브를 드래그하는 경우
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 ();
}
함수 canvasmouseout () {
$ (canvas) .trigger ( "마우스 업");
}
함수 canvasmouseup () {
selectObj.bdragall = false;
for (var i = 0; i <4; i ++) {
selectObj.bdrag [i] = false;
}
canvas.css ( "커서", "기본값");
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]; // 호버 상태
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 drawscene = function () {
ctx.clearrect (0, 0, ctx.canvas.width, ctx.canvas.height); // 캔버스를 클리어합니다
// 소스 이미지를 그립니다
ctx.DrawImage (image, 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 ( "터치 스타트", Canvasmousedown);
};
var createSelection = function (x, y, 너비, 높이) {
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;
}
for (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 (이미지, 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 = new Image ();
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);
} 또 다른 {
비율 = (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;
}
친구, 시도해보세요. 나는 당신이 그것을 좋아하기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요.