الكورس

Advertisements

HTML5 Canvas Graphics


يُستخدم عنصر <canvas> في HTML لرسم الرسومات على صفحة الويب.


 

ما هو Canvas؟

 

يمنحك عنصر <canvas> طريقة سهلة وفعالة لرسم الرسومات باستخدام JavaScript.

عنصر <canvas> ليس سوى حاوية للرسومات يجب عليك استخدام JavaScript لرسم الرسومات بالفعل.

يمكن استخدامه لرسم الرسوم البيانية(مثل المربعات والدوائر..إلخ) ، وإنشاء تكوينات للصور أو عمل رسوم متحركة ورسم النصوص.

 

الـ canvas عبارة عن منطقة مستطيلة ثنائية الأبعاد:

  1. إحداثيات الزاوية العلوية اليسرى هي (0 ، 0) والتي تُعرف بالأصل.
  2. إحداثيات الركن الأيمن السفلي هي (عرض canvas، ارتفاع canvas).

 

عنصر canvas مدعوم في جميع متصفحات الويب الرئيسية مثل Chrome و Firefox و Safari و Opera و IE 9 والمتصفحات الأخرى.

 

رسم المسارات والأشكال بإستخدام عنصر Canvas

 

الأن، سنتعرف على كيفية رسم المسارات والأشكال الأساسية باستخدام عنصر canvas و JavaScript.

 

القالب الأساسي لرسم المسارات والأشكال على canvas ثنائي الأبعاد:
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Drawing By Canvas</title>
    </head>

    <body>
        <canvas id="yourCanvas" width="300" height="200"></canvas>

        <script>
            window.onload = function() {
                var canvas = document.getElementById("yourCanvas");
                var contxt = canvas.getContext("2d");
                // draw here
            };
        </script>
    </body>
</html>

 

توضيح:

  • سيتم تنفيذ الوظيفة السابقة عند تحميل الصفحة، بسبب ربطها بالحدث window.onload.
  • بمجرد تحميل الصفحة ، يمكننا الوصول إلى عنصر canvas باستخدام طريقة ()document.getElementById.
  • قمنا بتعريف context للـ canvas ثنائي الأبعاد بتمرير 2d إلى طريقة ()getContext لكائن Canvas.

 


 

رسم خط

 

أبسط مسار يمكنك رسمه على canvas هو رسم خط مستقيم:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        contxt.moveTo(50, 200);
        contxt.lineTo(200, 50);
        contxt.stroke();
    };
</script>

Canvas Line

توضيح أهم الطرق المستخدمة فى رسمة الخط السابقة هي:

  1. ()moveTo: تحدد هذه الطريقة موضع مؤشر الرسم على الـ Canvas.
  2. ()lineTo: تُستخدم هذه الطريقة لتحديد إحداثيات نقطة نهاية الخط.
  3. ()strok: تُستخدم هذه الطريقة لجعل الخط مرئيًا.

 


 

تطبيق الألوان والـ style على الخط

 

اللون الافتراضي للحد هو الأسود وسمكه بكسل واحد

يمكنك ضبط لون وعرض الخط باستخدام هذه الخواص strokeStyle و lineWidth:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        contxt.lineWidth = 4;
        contxt.strokeStyle = "blue";
        contxt.moveTo(50, 200);
        contxt.lineTo(200, 50);
        contxt.stroke();
    };
</script>

Canvas Line With Style


 

رسم قوس

 

يمكنك إنشاء أقواس باستخدام طريقة ()arc، وتكون صيغة هذه الطريقة كالتالى:

contxt.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

مثال:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        contxt.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        contxt.stroke();
    };
</script>

Canvas Arc


 

رسم دائرة

 

لا توجد طريقة محددة لإنشاء دائرة مثل، بل يمكنك إنشاء قوس مغلق تمامًا مثل الدائرة باستخدام طريقة ()arc:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        /* syntax: context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); */
        contxt.arc(150, 100, 70, 0, 2 * Math.PI, false);
        contxt.stroke();
    };
</script>

Canvas Circle


 

رسم مستطيل

 

يمكنك إنشاء أشكال مستطيلة ومربعة باستخدام طريقة ()rect.

تتطلب طريقة ()rect أربع معلمات x و y موضع المستطيل وعرضه وارتفاعه:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        /* Syntax: context.rect(x, y, width, height); */
        contxt.rect(50, 50, 200, 100); 
        contxt.stroke();
    };
</script>

Canvas Rectangle


 

تعبئة الأشكال بالألوان

 

يمكنك أيضًا تعبئة أى شكل باللون الذى تريده باستخدام طريقة ()fillStyle :

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        contxt.rect(50, 50, 200, 100); 
        contxt.fillStyle = "#F00";
        contxt.fill();
        contxt.lineWidth = 4;
        contxt.strokeStyle = "gray";
        contxt.stroke();
    };
</script>

Canvas Rectangle With Fill Color

أثناء تصميم الأشكال عن طريق الـ Canvas ، يوصى باستخدام طريقة ()fill قبل طريقة ()stroke لتجسيد الحد بشكل صحيح.

 

رسم نص

 

يمكنك أيضًا رسم نص على الـ canvas:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas3");
        var contxt = canvas.getContext("2d");
        contxt.font = "25px Tahoma";
        contxt.fillText("Hello World!", 0, 70);
    };
</script>

Canvas Text


يمكنك أيضًا تطبيق طريقة ()strokeText على النص لتلوين محيط النص بدلاً من تعبئته:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas5");
        var contxt = canvas.getContext("2d");
        contxt.font = "25px Tahoma";
        contxt.strokeText("Hello World!", 0, 70);
    };
</script>

Canvas Stroke Text

أثناء تصميم النص عن طريق canvas ، يوصى باستخدام طريقة ()fillText قبل طريقة ()strokeText من أجل تجسيد الحد بشكل صحيح.

 

تعبئة ألوان متدرجة داخل أشكال Canvas

 

يمكنك أيضًا تعبئة لون التدرج داخل أشكال الـ Canvas. التدرج اللوني هو مجرد انتقال مرئي سلس من لون إلى آخر.

يتوفر نوعان من التدرج اللوني وهم linear (الخطي) و radial (الشعاعي).

 

1) رسم تدرج خطي

 

البنية الأساسية لإنشاء تدرج خطي:

var grd = contxt.createLinearGradient(startX, startY, endX, endY);

نستخدم طريقة ()createLinearGradient لرسم تدرج خطي:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        contxt.rect(50, 50, 200, 100);

        var grd = contxt.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#00f');
        grd.addColorStop(1, '#fff');

        contxt.fillStyle = grd;
        contxt.fill();
    };
</script>

Draw Linear Gradient


 

رسم تدرج شعاعي

 

البنية الأساسية لإنشاء تدرج شعاعى:

var grd = contxt.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

نستخدم طريقة ()createRadialGradient لرسم تدرج شعاعى:

<script>
    window.onload = function() {
        var canvas = document.getElementById("yourCanvas");
        var contxt = canvas.getContext("2d");
        contxt.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = contxt.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#00f');
        grd.addColorStop(1, '#fff');

        contxt.fillStyle = grd;
        contxt.fill();
    };
</script>

Draw Radial Gradient



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements