المشاكل التي تمت مواجهتها: html/11467.html">سبب تشوه عنصر اللوحة القماشية وتشويهه
هناك ثلاثة أحجام لعنصر DOM: حجم النمط وحجم html وحجم css.
عند استخدام عنصر اللوحة، يكون العرض والارتفاع الافتراضي لعنصر اللوحة هو 300 بكسل * 150 بكسل. الحجم الافتراضي هنا هو حجم HTML.
للمساعدة في الفهم بشكل أفضل، خذ الرسم كمثال. لوحة الرسم بحجم CSS أو حجم النمط، واللوحة القماشية بحجم html.
إذا لم نعرض حجم html لعنصر اللوحة المحدد، ولكن حدد حجم CSS الخاص به في ملف CSS. والنتيجة مربكة للغاية.
على سبيل المثال، نرسم دائرة نصف قطرها 50 بكسل على لوحة قماشية افتراضية بحجم 300 بكسل * 150 بكسل.
<html lang=zh><head> <meta charset=UTF-8> <title>حجم اللوحة</title> <style> #canvas { width: 200px height: 200px } </style></head>< body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const Canvas = document.getElementById(canvas); const ctx = Canvas.getContext(2d); ctx.beginPath(); ctx.strokeStyle = #aaaaaa; ClosePath();</script></body></html>النتائج النهائية المعروضة هي كما يلي:
ويمكن ملاحظة أن حجم اللوحة القماشية هو بالفعل 200 * 200. لكن الدائرة تحولت إلى شكل بيضاوي، وتشوه شكلها. لماذا هذا؟
ماذا يحدث إذا تمت إزالة الحجم الذي حدده CSS؟
ويمكن ملاحظة أن الرسم البياني طبيعي في هذا الوقت. حجم اللوحة القماشية هو بالفعل الحجم الافتراضي 300*150.
ومن المقارنة والخيال يمكننا استخلاص النتائج التالية:
في البداية قمنا برسم دائرة على قماش 300150. بعد اكتمال الرسم، نريد تغيير حجم اللوحة القماشية إلى 200200. وفي الوقت نفسه، تظل اللوحة القماشية هي نفس اللوحة القماشية ولن تتغير.
ما ينجح هو تمديد القماش. بافتراض أن القماش يتمتع بالمرونة، فإن القماش يمتد من 300150 إلى 200200. يصبح نصف المحور الرئيسي للدائرة على القماش 1.33 مرة من الحجم الأصلي، ويصبح نصف المحور الأصغر 0.68 مرة. عند هذه النقطة تكون الدائرة بشكل طبيعي قطع ناقص.
ختاماً:عند استخدام اللوحة القماشية للرسم، لتجنب المشاكل غير الضرورية، يجب أن تتذكر تعيين عرض وارتفاع حجم HTML لعنصر اللوحة القماشية.
تلخيصما ورد أعلاه هو تحليل موجز لتأثير حجم html وحجم css لعنصر اللوحة على العنصر المرئي الذي قدمه المحرر، وآمل أن يكون مفيدًا لك، إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي سوف يقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!