Canvas هي علامة تسمح لنا بالرسم باستخدام البرامج النصية ، والتي توفر مجموعة كاملة من الخصائص والأساليب. يمكننا استخدام هذا لتحقيق الرسم الرسومي ومعالجة الصور وحتى الرسوم المتحركة البسيطة وإنتاج اللعبة.
تحتوي علامة القماش على سمتين فقط: العرض والارتفاع ، والتي تستخدم لتعيين عرض وارتفاع القماش. إذا لم يتم تعيينه من خلال سمة العلامة أو البرنامج النصي ، فإن الافتراضي هو 300*150 ؛
حسنًا ، دعنا نتوقف هنا عن تقديم قماش. دعونا نلقي نظرة على رمز زراعة جافا سكريبت يجمع بين القماش لتنفيذ الصور:
نسخة الكود كما يلي:
var selectObj = null ؛
وظيفة imageCrop (canvasid ، صور ، 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 &&&
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 ("السحب" ، صحيح) ؛
}
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 ("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 ؛ // اسحب الاختيار الكامل
}
select.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) ؛ // قماش واضح
// ارسم صورة المصدر
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 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 = Picturesource ؛
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 (معاينة) {
var tmpcanvas = $ ("<canvas> </tanvas>") [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 (معاينة)) {
document.getElementById (معاينة) .src = tmpcanvas.todataurl () ؛
document.getElementById (معاينة) .style.border = "1PX Solid #CCC" ؛
}
إرجاع tmpcanvas.todataurl () ؛
}
} ؛
}
الوظيفة التلقائية (maxwidth ، maxheight ، objimg) {
var img = new image () ؛
img.src = objimg.src ؛
var hratio ؛
فار راتيو ؛
نسبة 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) {
if (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 ؛
}
الأصدقاء ، من فضلك جربه. أتمنى أن تعجبك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي.