تعليق: يوفر HTML5 Canvas واجهة برمجة تطبيقات رسومية يمكن تنفيذها ، والتي من خلالها يمكنك ببساطة إدراك الترجمة والدوران والتوسيع ، وما إلى ذلك. اسمحوا لي أن أشارككم في التنفيذ المحدد للترجمة والدوران والتحجيم والمرجع. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا لك.
يوفر HTML5 Canvas واجهة برمجة تطبيقات لتنفيذ ترجمة الرسم البياني والدوران والتوسيع.يترجم
ترجمة إحداثيات ترجمة (x ، y) تعني ترجمة الإحداثيات (0،0) إلى (x ، y) ، وتصبح الإحداثيات الأصلية (0،0) (-x ، -y)
التوضيح كما يلي:
نقطة الإحداثيات لأي نقطة إحداثي أصلية P (OX ، OY) بعد الترجمة هي P (OX-X ، OY-Y) ، حيث النقطة (X ، Y) هي ترجمة
تنسيق نقطة ترجمة (x ، y).
رمز العرض التوضيحي:
// الترجمة هي نقل نقطة البداية إلى سنترا والعودة إلى أعلى الزاوية اليسرى
وظيفة regnetext (العرض ، الارتفاع ، السياق) {
context.translate (العرض / 2 ، الارتفاع / 2) ؛ // إحداثيات نقطة الوسط هي (0 ، 0)
context.font = "18px arial" ؛
context.fillStyle = "Blue" ؛
context.fillText ("يرجى الضغط على <ech> للخروج من لعبة" ، 5،50) ؛
context.translate (-width/2 ، -height/2) ؛ // إحداثيات استرداد الترجمة (0،0) هي الزاوية اليسرى العليا
context.fillText ("لقد عدت إلى الأعلى" ، 5،50) ؛
}
حجم
المقياس (أ ، ب) يعني توسيع نطاق الكائن على طول المحور xy إلى أحجام*x ، b*y على التوالي. يظهر التأثير في الشكل:
// ترجمة المستطيل.
وظيفة drawpath (السياق) {
context.translate (200،200) ؛
سياق.
context.strokestyle = "Green" ؛
context.beginPath () ؛
context.moveto (0،40) ؛
context.lineto (80،40) ؛
context.lineto (40،80) ؛
context.closepath () ؛
سياق. ضربة () ؛
}
تناوب
تدوير الزاوية تدوير (Math.PI/8)
الإحداثيات p (x ، y) قبل الدوران هي p (rx ، ry) بعد الدوران المقابل
rx = x * cos (-angle)-y * sin (-angle) ؛
ry = y * cos (-angle) + x * sin (-angle) ؛
يمكن تبسيط دوران 90 درجة إلى:
rx = y ؛
ry = -x ؛
اتجاه الدوران الافتراضي في القماش هو في اتجاه عقارب الساعة. الرمز التجريبي كما يلي:
// new point.x = x * cos (-angle) -y * sin (-angle) ،
// new point.y = y * cos (-angle) +x * sin (-angle)
وظيفة renderRotateText (السياق) {
context.font = "24px arial" ؛
context.fillStyle = "Red" ؛
context.fillText ("أنا هنا !!!" ، 5،50) ؛
// تدوير -90 درجة
// context.rotate (-math.pi/2) ؛
// context.fillStyle = "Blue" ؛
// context.filltext ("أنا هنا !!!" ، -400،30) ؛
// تدوير 90 درجة
context.rotate (Math.pi/2) ؛
context.fillStyle = "Blue" ؛
context.filltext ("أنا هنا !!!" ، 350 ، -420) ؛
console.log (Math.sin (Math.PI/2)) ؛
// rotae 90 درجة ورسم 10 خطوط
context.fillStyle = "Green" ؛
لـ (var i = 0 ؛ i <4 ؛ i ++) {
var x = (i+1)*20 ؛
var y = (i+1)*60 ؛
var newx = y ؛
var newy = -x ؛
Context.FillRect (Newx ، Newy ، 200 ، 6) ؛
}
}
الممارسة المعتادة هي استخدام الدوران والترجمة ، وترجم أولاً الإحداثيات (0،0) إلى وضع المركز.
ترجمة (العرض/2 ، الارتفاع/2) ثم تدوير (Math.PI/2) لإكمال الدوران
مثال الكود كما يلي:
وظيفة saveandrestorecontext (السياق) {
context.save () ؛
context.translate (200،200) ؛
context.rotate (Math.pi/2) ؛
context.fillStyle = "Black" ؛
Context.FillText ("Context 2D تدوير وترجمة" ، 10 ، 10) ؛
context.restore () ؛
Context.FillText ("Context 2D تدوير وترجمة" ، 10 ، 10) ؛
}
كل رمز JavaScript:
var tempContext = null ؛ // سياق متغير عالمي 2D
window.onload = function () {
var canvas = document.getElementById ("Target") ؛
canvas.width = 450 ؛
canvas.Height = 450 ؛
if (! canvas.getContext) {
console.log ("قماش غير مدعوم. يرجى تثبيت متصفح متوافق مع HTML5.") ؛
يعود؛
}
// احصل على سياق ثنائي الأبعاد من القماش ورسم الصورة
TempContext = canvas.getContext ("2d") ؛
// regnetext (canvas.width ، canvas.height ، tempContext) ؛
SaveAndrestoreContext (TempContext) ؛
// DrawPath (tempContext) ؛
}
// الترجمة هي نقل نقطة البداية إلى سنترا والعودة إلى أعلى الزاوية اليسرى
وظيفة regnetext (العرض ، الارتفاع ، السياق) {
context.translate (العرض / 2 ، الارتفاع / 2) ؛
context.font = "18px arial" ؛
context.fillStyle = "Blue" ؛
context.fillText ("يرجى الضغط على <ech> للخروج من لعبة" ، 5،50) ؛
context.translate (-width/2 ، -height/2) ؛
context.fillText ("لقد عدت إلى الأعلى" ، 5،50) ؛
}
// ترجمة المستطيل.
وظيفة drawpath (السياق) {
context.translate (200 ، 200) ؛
context.scale (2،2) ؛ // النطاق مرتين حجم الشكل الأصلي
context.strokestyle = "Green" ؛
context.beginPath () ؛
context.moveto (0 ، 40) ؛
context.lineto (80 ، 40) ؛
context.lineto (40 ، 80) ؛
context.closepath () ؛
سياق. ضربة () ؛
}
// new point.x = x * cos (-angle)-y * sin (-angle) ،
// new point.y = y * cos (-angle) + x * sin (-angle)
وظيفة renderRotateText (السياق) {
context.font = "24px arial" ؛
context.fillStyle = "Red" ؛
context.fillText ("أنا هنا !!!" ، 5،50) ؛
// تدوير -90 درجة
// context.rotate (-math.pi/2) ؛
// context.fillStyle = "Blue" ؛
// context.filltext ("أنا هنا !!!" ، -400،30) ؛
// تدوير 90 درجة
context.rotate (Math.pi/2) ؛
context.fillStyle = "Blue" ؛
context.filltext ("أنا هنا !!!" ، 350 ، -420) ؛
console.log (Math.sin (Math.PI/2)) ؛
// rotae 90 درجة ورسم 10 خطوط
context.fillStyle = "Green" ؛
لـ (var i = 0 ؛ i <4 ؛ i ++) {
var x = (i+1)*20 ؛
var y = (i+1)*60 ؛
var newx = y ؛
var newy = -x ؛
Context.FillRect (Newx ، Newy ، 200 ، 6) ؛
}
}
وظيفة saveandrestorecontext (السياق) {
context.save () ؛
context.translate (200،200) ؛
context.rotate (Math.pi/2) ؛
context.fillStyle = "Black" ؛
Context.FillText ("Context 2D تدوير وترجمة" ، 10 ، 10) ؛
context.restore () ؛
Context.FillText ("Context 2D تدوير وترجمة" ، 10 ، 10) ؛
}