ما هو قماش HTML5؟

https://stackoverflow.com/questions/2483780

21-09-2019
|

سؤال

أنا في حيرة من أمري مع ماهية HTML5. لقد قيل لي إنه جافا سكريبت ، لكن يبدو أنها صفقة أكبر بكثير؟

ما الذي يجعله مختلفًا عن JavaScript؟
لماذا هو مذهل جدا؟
هل تفعل أشياء أخرى غير جافا سكريبت؟

المحلول

أقترح عليك قراءة هذا المقال HTML5 Canvas - الأساسيات

ولكن باختصار. لا يحل محل جافا سكريبت.

HTML 5 اللوحة القماشية يمنحك طريقة سهلة وقوية لرسم الرسومات باستخدام JavaScript. لكل عنصر من عناصر القماش ، يمكنك استخدام "سياق" (فكر في صفحة في لوحة رسم) ، والتي يمكنك إصدار أوامر JavaScript فيها لرسم أي شيء تريده. يمكن للمتصفحات تنفيذ سياقات قماش متعددة وتوفر واجهات برمجة التطبيقات المختلفة وظائف الرسم.

نصائح أخرى

ال canvas هو أساسا img العنصر الذي يمكنك الاستفادة منه باستخدام JavaScript.

ال عنصر قماش هو في الأساس قماش رسم يمكن رسمه برمجيا ؛ نوع من أداة رسم صورة نقطية قابلة للسيناريو للويب.

أفترض أن الشيء "المذهل" حول هذا الموضوع ، بصرف النظر عن حقيقة أنه يمكننا الآن إنشاء استنساخ MS Paint المستندة إلى الويب بسهولة ، هو أن لديك منطقة أكثر ثراءً وخالية تمامًا لإنشاء جانب عميل رسومات معقدة و في حالة الطيران. يمكنك رسم الرسوم البيانية الجميلة ، أو القيام بالأشياء بالصور. يزعم أنه يمكنك أيضًا القيام بالرسوم المتحركة!

مركز مطور موزيلا لديه برنامج تعليمي معقول إذا كنت تريد تجربتها.

بادئ ذي بدء ، القماش ليس جافا سكريبت! هذه 2 أشياء مختلفة تماما.

Canvas هو عنصر HTML5 يمكن استخدامه لتقديم الرسومات أو الرسوم المتحركة أو الرسوم البيانية أو مؤلفات الصور أو أي كائنات مرئية أخرى أثناء الطيران باستخدام JavaScript. في كثير من الأحيان ، استخدمت Canvas لبناء لعبة الويب والعرض التقديمي عبر الإنترنت.

اللوحة القماشية - منطقة مستطيل مثل الورق الأبيض
سياق - إرجاع الكائن باستخدام ما يمكننا تسميته العديد من الوظائف التي يتم استخدامها لرسم الرسومات والرسوم المتحركة على قماش (مثل كيفية استخدام أقلام الرصاص على الورق)

انظر المثال التالي الذي يرسم خطًا على القماش:

<html>
      <body>
       <canvas id="c" width="200" height="200" style="border:1px solid"></canvas>
        <script>
          var canvas = document.getElementById("c");//get the canvas in javascript
          var context = canvas.getContext("2d");//getcontext on canvas
          context.beginPath();//start the path.we are going to draw the line
          context.moveTo(20,20);//starting point of Line
          context.lineTo(40,20);//ending point of Line
          context.stroke(); //ink used for drawing Line (Default: Black)
        </script>
      </body>
    </html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow