مؤخرًا، نظرًا لاحتياجات العمل، تعرفت على علامة Canvas في Html.
يعتبر Canvas مكونًا جديدًا لـ HTML5، وهو يشبه الستار الذي يمكن رسم العديد من المخططات والرسوم المتحركة وما إلى ذلك باستخدام JavaScript.
في عصر ما قبل Canvas، لم يكن من الممكن تحقيق الرسم إلا بمساعدة مكونات Flash الإضافية، وكان يتعين على الصفحات استخدام JavaScript وFlash للتفاعل. مع Canvas، لم نعد بحاجة إلى Flash ويمكننا استخدام JavaScript مباشرةً لإكمال الرسم.
بدأت المشكلة عندما كتبت بنفسي عالمًا مرحبًا بعد مشاهدة البرنامج التعليمي. انظر إلى الكود أدناه:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px Solid black;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); 0); ctx.lineTo(200, 200);
معنى الكود أعلاه هو رسم خط مستقيم على لوحة قماشية بعرض وارتفاع 200 بكسل لكل منهما. نقطة البداية للخط المستقيم هي (0,0) ونقطة النهاية هي (200,200)؛
لكن الصورة التي رسمها المتصفح هي:
ألقِ نظرة على هذه الصورة ~ لماذا هذا المنحدر؟ لا ينبغي أن يكون ~ بل يجب أن يكون خطًا قطريًا ~~
لاحقًا، بعد البحث عن المعلومات، اكتشفت أنه عند ضبط عرض وارتفاع علامة اللوحة القماشية، هناك الطرق والعواقب التالية:
العرض الافتراضي لعنصر Canvas هو 300 بكسل والارتفاع 150 بكسل لتعيين العرض والارتفاع، يمكنك استخدام الطريقة التالية:
الطريقة الأولى:
1 <عرض القماش=500 الارتفاع=500$amp;>amp;$lt;/canvas>
الطريقة الثانية: استخدام عملية HTML5 Canvas API
1 var Canvas = document.getElementById('معرف اللوحة القماشية المراد تشغيلها');
2 قماش. العرض = 500؛
3 قماش. العرض = 500؛
إذا تم ضبط العرض والارتفاع بالطريقة التالية، فسيتم تمديد عنصر Canvas من الحجم الأصلي إلى العرض والارتفاع المحددين:
الطريقة الأولى: سيؤدي استخدام CSS إلى تمديد ملف
1 # لتشغيل معرف اللوحة القماشية {
2 العرض: 1000 بكسل؛
3 الارتفاع: 1000 بكسل؛
4｝
يتضمن أيضًا style= في الأنماط المضمنة. وهذا يعني أنه في المثال أعلاه، سيحدث التمدد أيضًا.
الطريقة الثانية: سيتم توسيع العمليات باستخدام HTML5 Canvas API
1 var Canvas = document.getElementById('معرف اللوحة القماشية المراد تشغيلها');
2 Canvas.style.width = 1000px;
3 قماش.نمط.ارتفاع = 1000px;
الطريقة الثالثة: سيتم تمديد استخدام $(#id).width(500);
أخرى: لا يمكن التعبير عن عرض اللوحة القماشية وارتفاعها كنسب مئوية. ستعرض اللوحة القماشية النسبة المئوية كقيمة رقمية
لذلك، من المعلومات المذكورة أعلاه، يمكننا أن نعرف أن السبب هو أن الكود الموجود في المثال أعلاه سوف يؤدي إلى تمديد عرض اللوحة القماشية وارتفاعها، مما يجعل الصورة غير متوافقة مع التوقعات.
لقد قمت الآن بإعادة كتابة مثال التعليمات البرمجية لتعيين عرض اللوحة القماشية وارتفاعها بشكل صحيح:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px Solid black;> متصفحك لا يدعم عنصر اللوحة.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200);
نتيجة:
ينهي.
تلخيصما ورد أعلاه هو المحتوى الكامل لهذه المقالة، وآمل أن يكون لمحتوى هذه المقالة قيمة مرجعية معينة لدراسة أو عمل الجميع. إذا كان لديك أي أسئلة، يمكنك ترك رسالة للتواصل شبكة.