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 ("เคอร์เซอร์", "ค่าเริ่มต้น");
-
ฟังก์ชั่น 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 ("เคอร์เซอร์", "ค่าเริ่มต้น");
if (selectobj.bdragall) {
canvas.css ("เคอร์เซอร์", "ย้าย");
canvas.data ("ลาก", จริง);
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;
-
สำหรับ (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 &&
iMouseey> selectobj.y - selectoBj.csizeh && iMouseey <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 &&
iMouseey> selectobj.y - selectoBj.csizeh && iMouseey <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 &&
iMouseey> selectobj.y + selectoBj.h - selectoBj.csizeh && iMouseey <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 &&
iMouseey> selectobj.y + selectoBj.h - selectoBj.csizeh && iMouseey <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 && iMouseey> selectoBj.y && iMouseey <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 ("ลาก", จริง);
-
if (selectoBj.bdrag [1]) {
IFX = SelectObj.x;
ify = iMousey - selectobj.py;
ifw = iMousex - SelectObj.px - IFX;
IFH = SELECTOBJ.H + SELECTOBJ.Y - IFY;
canvas.data ("ลาก", จริง);
-
if (selectobj.bdrag [2]) {
IFX = SelectObj.x;
ify = selectobj.y;
ifw = iMousex - SelectObj.px - IFX;
IFH = IMOUSEY - SelectObj.py - Ify;
canvas.data ("ลาก", จริง);
-
if (selectoBj.bdrag [3]) {
IFX = IMOUSEX - SelectObj.px;
ify = selectobj.y;
IFW = SELECTOBJ.W + SELECTOBJ.X - IFX;
IFH = IMOUSEY - SelectObj.py - Ify;
canvas.data ("ลาก", จริง);
-
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 ("MouseUp");
-
ฟังก์ชั่น canvasmouseup () {
selectobj.bdragall = false;
สำหรับ (var i = 0; i <4; i ++) {
selectoBj.bdrag [i] = false;
-
canvas.css ("เคอร์เซอร์", "ค่าเริ่มต้น");
canvas.data ("เลือก", {
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 = [เท็จ, เท็จ, เท็จ, เท็จ]; // สถานะโฮเวอร์
this.icsize = [this.csize, this.csize, this.csize, this.csize]; // ปรับขนาดขนาดลูกบาศก์
this.bdrag = [เท็จ, เท็จ, เท็จ, เท็จ]; // การลากสถานะ
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 (ภาพ, 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); // Clear Canvas
// วาดภาพต้นฉบับ
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, ความกว้าง, ความสูง) {
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 imouseey = 1;
ภาพ var = ภาพใหม่ ();
image.onload = function () {
SelectObj = createSelection (x, y, ความกว้าง, ความสูง);
canvas.data ("เลือก", {
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 = iMouseey - selectobj.y;
if (selectobj.bhow [0]) {
selectoBj.px = iMousex - selectobj.x;
selectobj.py = iMouseey - selectobj.y;
-
if (selectobj.bhow [1]) {
selectoBj.px = iMousex - selectobj.x - selectobj.w;
selectobj.py = iMouseey - selectobj.y;
-
if (selectobj.bhow [2]) {
selectoBj.px = iMousex - selectobj.x - selectobj.w;
selectobj.py = iMouseey - selectobj.y - selectobj.h;
-
if (selectobj.bhow [3]) {
selectoBj.px = iMousex - selectobj.x;
selectobj.py = iMouseey - selectobj.y - selectobj.h;
-
if (iMousex> selectobj.x + selectoBj.csizeh &&
iMousex <selectobj.x + selectoBj.w - selectobj.csizeh &&
iMouseey> selectobj.y + selectobj.csizeh &&
iMouseey <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.getImageTa = function (previewId) {
var tmpcanvas = $ ("<canvas> </anvas>") [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";
-
ส่งคืน 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;
} อื่นถ้า (maxWidth == 0) {
ถ้า (hratio <1) {
อัตราส่วน = Hratio;
-
} อื่นถ้า (maxHeight == 0) {
if (wratio <1) {
อัตราส่วน = wratio;
-
} อื่นถ้า (wratio <1 || hratio <1) {
อัตราส่วน = (wratio <= hratio? wratio: hratio);
} อื่น {
อัตราส่วน = (wratio <= hratio? wratio: hratio) - math.floor (wratio <= hratio? wratio: hratio);
-
ถ้า (อัตราส่วน <1) {
if (อัตราส่วน <0.5 && w <maxWidth && h <maxheight) {
อัตราส่วน = 1 - อัตราส่วน;
-
W = W * อัตราส่วน;
H = อัตราส่วน H *;
-
objimg.height = h;
objimg.width = w;
-
เพื่อนโปรดลอง ฉันหวังว่าคุณจะชอบมัน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน