لقد واجهت مؤخرًا مشكلة صغيرة عند تعلم خصائص اللوحة القماشية، وهي عرض اللوحة القماشية وارتفاعها، وقد قمت بحلها أخيرًا من خلال البحث عن المعلومات ذات الصلة، لذلك سأشارككم عملية الحل ولن أقول الكثير أدناه نلقي نظرة على التفاصيل
سمة ارتفاع عرض القماش1. عند استخدام خاصية العرض والارتفاع، لن يتم تمديد الشاشة بشكل طبيعي كما يلي:
<canvas id=mycanvas width=300 height=300>المتصفح لا يدعم Canvas، يرجى الترقية أو استخدام متصفح آخر! </canvas><script type=text/javascript> var Canvas = document.getElementById(mycanvas), ctx = Canvas.getContext('2d'); ctx.moveTo(0,0); .السكتة الدماغية ()؛</script>تأثير التشغيل هو كما يلي، وهو خط قطري
2. عند استخدام النمط، سيتم تمديد الصورة (مشوهة).
<style> #mycanvas { width: 150px height: 150px; </style>تأثير العملية
كيف تفهم؟ ؟ ؟ يمكن فهم الأمر بهذه الطريقة--القماش عبارة عن لوحة رسم وقطعة من ورق الرسم. لوحة الرسم تعادل الحاوية.
العرض والارتفاع الافتراضي للوحة الرسم وورق الرسم هو 300*150. عندما يكون عرض وارتفاع ورق الرسم ولوحة الرسم متساويين، لن يتم تمديد الصورة عندما يكون عرض ورق الرسم وارتفاعها تختلف لوحة الرسم، وسوف تتمدد الصورة (مشوهة).
1. تحدد سمات العرض والارتفاع عرض وارتفاع لوحة الرسم وورق الرسم.
على سبيل المثال: العرض = 300 الارتفاع = 300 يعني أن عرض لوحة الرسم وارتفاعها 300*300، وعرض ورقة الرسم وارتفاعها أيضًا 300*300. لن تكون الصورة القطرية للمهمة 300*300 تكون ممتدة.
2. يتم تعيين عرض وارتفاع لوحة الرسم فقط في النمط. لا يزال عرض ورق الرسم وارتفاعه هو القيمة الافتراضية 300*150.
(خذ الصورة أعلاه كمثال) لذلك، يتم رسم جزء فقط من الصورة القطرية 300*300 التي تعمل عليها على ورق الرسم، كما يلي:
بالمناسبة، لن تترك ورقة الرسم لوحة الرسم فارغة، لذلك يجب تمديد ورقة الرسم والصورة إلى نفس حجم لوحة الرسم. في هذا المثال، يبلغ عرض ورقة الرسم وعرض لوح الرسم 30، والارتفاع هو نصف لوح الرسم، لذلك تحتاج فقط إلى تمديد الارتفاع مرتين، وبالتالي يتم تمديد الصورة أيضًا وتخفيفها، يبقى اتجاه X دون تغيير، ويتضاعف اتجاه Y، فنحصل على الصورة المشوهة.
تلخيصفيما يتعلق بإعدادات العرض والارتفاع لـ Canvas في HTML5
يبلغ عرض عنصر Canvas 300 بكسل وارتفاعه 150 بكسل بشكل افتراضي، لتعيين عرضه وارتفاعه، يمكنك استخدام الطريقة التالية (لن يتم تمديده):
الطريقة الأولى:
<عرض القماش=500 الارتفاع=500></قماش>
الطريقة الثانية: استخدم HTML5 Canvas API للعمل بشكل جيد
var Canvas = document.getElementById('معرف اللوحة القماشية التي تريد تشغيلها');
عرض القماش = 500؛
عرض القماش = 500؛
إذا تم ضبط العرض والارتفاع بالطريقة التالية، فسيتم تمديد عنصر Canvas من الحجم الأصلي إلى العرض والارتفاع المحددين:
الطريقة الأولى: سيؤدي استخدام CSS إلى تمديد ملف
# لتشغيل معرف اللوحة القماشية {
العرض: 1000 بكسل؛
الارتفاع: 1000 بكسل؛
｝
الطريقة الثانية: سيتم توسيع العمليات باستخدام HTML5 Canvas API
var Canvas = document.getElementById('معرف اللوحة القماشية التي تريد تشغيلها');
Canvas.style.width = 1000px;
Canvas.style.height = 1000px;
الطريقة الثالثة: سيتم تمديد استخدام $(#id).width(500);
أخرى: لا يمكن التعبير عن عرض اللوحة القماشية وارتفاعها كنسب مئوية. ستعرض اللوحة القماشية النسبة المئوية كقيمة رقمية
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة، وآمل أن يكون لمحتوى هذه المقالة قيمة مرجعية معينة لدراسة أو عمل الجميع. إذا كان لديك أي أسئلة، يمكنك ترك رسالة للتواصل شبكة.