الدرس ( الرابع ) : HTML5 Canvas

محمد جبلي · 11-10-2010, 03:14 PM

بسم الله الرحمن الرحيم

الحمد لله رب العالمين , والصلاة والسلام على خير المرسلين

جاء وقت الرسم و الرسامين

HTML5 Canvas

الـ Canvas هي لوحتك و Javascript هي فرشتك
أبدع و أمتعنا

روابط الدرس :
HTML5 Canvas

رابط العنصر Canvas :
HTML 5 canvas Tag

البرشام : ( )
صورة :
http://www.nihilogic.dk/labs/canvas_...heat_Sheet.png
pdf :
http://www.nihilogic.dk/labs/canvas_...heat_Sheet.pdf

التحدي هنا لمن لا يعرف الجافا سكربت ,
عليك بالمرور على دروس الجافا سكربت
وتعلمها , و أخذ المفيد .
إن كانت لديك أسئلة عن الجافا سكربت
فكتبها في هذا الموضوع :
http://forum.ma3ali.net/t651101.html
سأكون أنا معكم بإذن الله في تعلم الجافا سكربت
مرة أخرى و نفض الغبار عن المعلومات الموجودة لدي

الواجب :
رسم "معين"

بالتوفيق

عاصم نت · 11-10-2010, 06:16 PM

ما اعرف شيء بالجافا !!
ولاحرف منها !

وش اسوي ؟ مافيهـ محرر للـHTML5 ?

محمد جبلي · 12-10-2010, 12:08 AM

^^^

إن كنت لا تعرف , ببساطة تعلم
الجافاسكربت سهله , لا تحتاج مجهوداً عالياً

عاليا · 12-10-2010, 02:46 AM

بسم الله الرحمن الرحيم

بارك الله فيكم درس ممتع وسيساعدنا على تذكر ما نسيناه من js أو نتعلمها من البداية ما المانع ؟
على أي حال js ممتعة في دراستها وسهلة جدا بإذن الله .

الواجب:

كود PHP:

  <html>

  <head>

    <title>Test</title>

        <script type="text/javascript">

      function drawShape(){

        var canvas = document.getElementById('ma3ali');

        if (canvas.getContext)

        {

          var ctx = canvas.getContext('2d');

 
          // محاولة لرسم معين

 
          ctx.moveTo(95,95);

          ctx.lineTo(105,25);

          ctx.lineTo(25,105);

          ctx.moveTo(35,35);

          ctx.lineTo(105,25);

          ctx.lineTo(25,105);

          ctx.fill();

          ctx.stroke();

 
        } 

        

        else {

          alert('متصفحك لا يدعم هذه اللغة');

        }

      }

    </script>

    <style type="text/css">

      body {background: #FFF8C6;}

           canvas { border: 2px solid #C8B560;}

        </style>

  </head>

 
  <body onload="drawShape();">

      <canvas id="ma3ali" width="150" height="150"></canvas>

 

  </body>

  

</html>

لي عودة إن شاء الله بشرح ما فهمت من الدرس

بوح خافق · 12-10-2010, 01:47 PM

أرجو أن يكونَ وقتُ الدّرس كافيًا لنتعلّم الجافا سكربت "^^
سأعود بعد أن أفعل بإذن الله.

محمد جبلي · 12-10-2010, 04:27 PM

وقت الدرس بين أيدينا
سيمتد وقت الدرس إن وجدت هنالك تفاعل مع دروس الجافاسكربت
ووجدت أخذاً ورداً , فالجافا سكربت أهم من HTML5 في نظري

هدفنا التعلم ,

وإن أردتم العودة لدروس الجافا سكربت درساً درساً
لا مانع لدي

محمد جبلي · 13-10-2010, 02:08 AM

فن الرسم على لوحة canvas

The HTML5 Experiments of Hakim El Hattab

تمتع

عاليا · 13-10-2010, 02:27 AM

بسم الله الرحمن الرحيم

عنصر الرسم Canvas في لغة HTML5 :

• استخدمت لغة HTML عنصر جديد للرسم في صفحات الويب وهو العنصر canvas.
• يتم الرسم في العنصر canvas عن طريق جافا سكربت.
• العنصر canvas هو عبارة عن مساحة مستطلية خالية تستطيع التحكم التام في كامل مساحته .
• يمكننا داخل العنصر canvas رسم مسارات و مربعات و دوائر و حروف و إضافة صور .

تكوين الوسم لعنصر الرسم Canvas في لغة HTML5 :

• يتكون العنصر Canvas من وسم فتح <canvas> .
• يحتوي وسم الفتح <canvas>على بعض الخصائص مثل العرض والارتفاع والـ id .
• ثم يتم اغلاق الوسم </canvas> .

شرح مثال لرسم مربع من خلال العنصر Canvas :

1 – نكتب وسم التعريف .

كود PHP:

  <!DOCTYPE HTML>

2 – نكتب الأوسمة التي نبدأ بها صفحتنا .
يتم إستدعاء الكود في الحدث load للصفحة

كود PHP:

  <body onload="draw()">

.

كود PHP:

  <html>

<head>

<title> Canvas رسم مربع باستخدام العنصر</title>

<**** http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

 <body onload="draw()">

3 – نضع وسم <canvas> ..... </canvas> وبداخله ما يلي :

• نعطي id لـ Canvas حتى نُمكِّن الجافا سكربت من الوصول إلى اللوحة والرسم عليها

كود PHP:

  id="Canvastest"

.
• نقوم بتحديد ارتفاع وعرض لوحة الرسم الخاصة بنا

كود PHP:

  width="150" height="200"

.
• نقوم بعمل ستايل لحدود لوحتنا (إن أردنا ذلك)

كود PHP:

  style="border:3px solid #FF7700;"

.
• نضع جملة تظهر فى حال عدم دعم المتصفحات لعنصر canvas .

وهكذا يكون الشكل النهائي للوسم :

كود PHP:

     <canvas id="Canvastest" border="3" width="150" height="200" style="border:3px solid #FF7700;">

       Your browser does not support canvas

    </canvas>

4 – نكتب كود الجافا سكربت الخاص بالرسم أو التصميم الذي نريده .

كود PHP:

  <script type="text/javascript">

 function draw() 

{

        var canvas = document.getElementById('Canvastest');

        var context = canvas.getContext('2d');

        

        context.fillStyle = "#857";

        context.fillRect(30,30,50,50);

        

        context.strokeStyle = "#ccccff";

        context.lineWidth = 4;

        context.strokeRect(30,30,50,50);

      }  

    </script>

شرح كود الجافا سكربت :

1 – عرفنا المتغير الأول canvas عن طريق ايجاده من خلال الـ id الخاص بالوسم الموجود في الـ html .

كود PHP:

  var canvas = document.getElementById('Canvastest');

2 – عرفنا المتغير الثاني context بأنه سيكون عبارة عن شكل ثنائي الأبعاد 2D .

كود PHP:

  var context = canvas.getContext('2d');

3 - استخدمنا fillStyle لعمل لون للشكل ( تقوم بتحديد لون التعبئة التي سوف يتم إستخدامها في عمليات الرسم في ال Context ).

كود PHP:

    context.fillStyle = "#857";

4 - استخدمنا fillRect لعمل أبعاد الشكل ( رسم مربع مصمت باللون الذي تم تحديده من خلال الخاصية fillStyle ).

كود PHP:

  context.fillRect(30,30,50,50);

5 - استخدمنا strokeStyle لعمل الوان الاستايل للشكل (عمل حد محيط للشكل) .

كود PHP:

  context.strokeStyle = "#ccccff";

6 - استخدمنا lineWidth واعطينا له القيمة 4 .

كود PHP:

  context.lineWidth = 4;

7 - استخدمنا StrokeRect واعطينا له القيم 30,30,50,50 (رسم مربع حدود بدون تعبئته بأي لون) .

كود PHP:

  context.strokeRect(30,30,50,50);

5 - ثم نقوم بغلق الأوسمة الأساسية .

المثال للتجربة :

كود PHP:

  <!DOCTYPE HTML>  

<html>

<head>

<title> Canvas رسم مربع باستخدام العنصر</title>

<**** http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

 <body onload="draw()">

    <canvas id="Canvastest" border="3" width="150" height="200" style="border:3px solid #FF7700;">

       Your browser does not support canvas

    </canvas>  

<script type="text/javascript">

 function draw() 

{

        var canvas = document.getElementById('Canvastest');

        var context = canvas.getContext('2d');

        

        context.fillStyle = "#857";

        context.fillRect(30,30,50,50);

        context.strokeStyle = "#ccccff";

        context.lineWidth = 4;

        context.strokeRect(30,30,50,50);

      }  

    </script> 

 
</body>

 
</html>

عاليا · 13-10-2010, 02:35 AM

شرح رائع للعنصر Canvas باللغة العربية

قلعة الأكواد - كلام في ال HTML5 الجزء الثالث

عاصم نت · 15-10-2010, 01:56 AM

استاذ محمد
لو حصل ننط هذا الدرس ونرجع لهـ بعديين.. يكون احسن !
يبدو ان المعنويات بدأت تتلاشى !!

عاليا · 16-10-2010, 05:18 AM

استخدام عنصر الفيديو مع عنصر Canvas
HTML5 Video Destruction

العنصر Canvas يعمل على المتصفحات :Firefox, Chrome, Opera .

المشاركة الأصلية كتبت بواسطة عاصم نت

استاذ محمد
لو حصل ننط هذا الدرس ونرجع لهـ بعديين.. يكون احسن !
يبدو ان المعنويات بدأت تتلاشى !!

مع أخي عاصم برأيه .


Ma3ali Tube	Be Happy	الجـوال	Ma3ali flickr	الغرفة الصوتية	البطاقات	الصـوتيـات	مركز التحميل	مجلة أجيال

11-10-2010, 03:14 PM	#1
محمد جبلي اوسمتي مجموع الاوسمة: 1	الدرس ( الرابع ) : HTML5 Canvas بسم الله الرحمن الرحيم الحمد لله رب العالمين , والصلاة والسلام على خير المرسلين جاء وقت الرسم و الرسامين HTML5 Canvas الـ Canvas هي لوحتك و Javascript هي فرشتك أبدع و أمتعنا روابط الدرس : HTML5 Canvas رابط العنصر Canvas : HTML 5 canvas Tag البرشام : ( ) صورة : http://www.nihilogic.dk/labs/canvas_...heat_Sheet.png pdf : http://www.nihilogic.dk/labs/canvas_...heat_Sheet.pdf التحدي هنا لمن لا يعرف الجافا سكربت , عليك بالمرور على دروس الجافا سكربت وتعلمها , و أخذ المفيد . إن كانت لديك أسئلة عن الجافا سكربت فكتبها في هذا الموضوع : http://forum.ma3ali.net/t651101.html سأكون أنا معكم بإذن الله في تعلم الجافا سكربت مرة أخرى و نفض الغبار عن المعلومات الموجودة لدي الواجب : رسم "معين" بالتوفيق
محمد جبلي اوسمتي مجموع الاوسمة: 1
1

12-10-2010, 12:08 AM	#3
محمد جبلي اوسمتي مجموع الاوسمة: 1	رد: الدرس ( الرابع ) : HTML5 Canvas ^^^ إن كنت لا تعرف , ببساطة تعلم الجافاسكربت سهله , لا تحتاج مجهوداً عالياً
محمد جبلي اوسمتي مجموع الاوسمة: 1

12-10-2010, 02:46 AM	#4
عاليا مشرفة فريق التعلم الذاتي	رد: الدرس ( الرابع ) : HTML5 Canvas بسم الله الرحمن الرحيم بارك الله فيكم درس ممتع وسيساعدنا على تذكر ما نسيناه من js أو نتعلمها من البداية ما المانع ؟ على أي حال js ممتعة في دراستها وسهلة جدا بإذن الله . الواجب: كود PHP: <html> <head> <title>Test</title> <script type="text/javascript"> function drawShape(){ var canvas = document.getElementById('ma3ali'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // محاولة لرسم معين ctx.moveTo(95,95); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.moveTo(35,35); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); ctx.stroke(); } else { alert('متصفحك لا يدعم هذه اللغة'); } } </script> <style type="text/css"> body {background: #FFF8C6;} canvas { border: 2px solid #C8B560;} </style> </head> <body onload="drawShape();"> <canvas id="ma3ali" width="150" height="150"></canvas> </body> </html> لي عودة إن شاء الله بشرح ما فهمت من الدرس
عاليا مشرفة فريق التعلم الذاتي

12-10-2010, 04:27 PM	#6
محمد جبلي اوسمتي مجموع الاوسمة: 1	رد: الدرس ( الرابع ) : HTML5 Canvas وقت الدرس بين أيدينا سيمتد وقت الدرس إن وجدت هنالك تفاعل مع دروس الجافاسكربت ووجدت أخذاً ورداً , فالجافا سكربت أهم من HTML5 في نظري هدفنا التعلم , وإن أردتم العودة لدروس الجافا سكربت درساً درساً لا مانع لدي
محمد جبلي اوسمتي مجموع الاوسمة: 1


منتديات مسلمة النسائية	مساحة إعلانيه

11-10-2010, 06:16 PM	#2
عاصم نت	رد: الدرس ( الرابع ) : HTML5 Canvas ما اعرف شيء بالجافا !! ولاحرف منها ! وش اسوي ؟ مافيهـ محرر للـHTML5 ?
عاصم نت

12-10-2010, 01:47 PM	#5
بوح خافق	رد: الدرس ( الرابع ) : HTML5 Canvas أرجو أن يكونَ وقتُ الدّرس كافيًا لنتعلّم الجافا سكربت "^^ سأعود بعد أن أفعل بإذن الله.
بوح خافق

13-10-2010, 02:08 AM	#7
محمد جبلي اوسمتي مجموع الاوسمة: 1	رد: الدرس ( الرابع ) : HTML5 Canvas فن الرسم على لوحة canvas The HTML5 Experiments of Hakim El Hattab تمتع
محمد جبلي اوسمتي مجموع الاوسمة: 1

13-10-2010, 02:27 AM	#8
عاليا مشرفة فريق التعلم الذاتي	رد: الدرس ( الرابع ) : HTML5 Canvas بسم الله الرحمن الرحيم عنصر الرسم Canvas في لغة HTML5 : • استخدمت لغة HTML عنصر جديد للرسم في صفحات الويب وهو العنصر canvas. • يتم الرسم في العنصر canvas عن طريق جافا سكربت. • العنصر canvas هو عبارة عن مساحة مستطلية خالية تستطيع التحكم التام في كامل مساحته . • يمكننا داخل العنصر canvas رسم مسارات و مربعات و دوائر و حروف و إضافة صور . تكوين الوسم لعنصر الرسم Canvas في لغة HTML5 : • يتكون العنصر Canvas من وسم فتح <canvas> . • يحتوي وسم الفتح <canvas>على بعض الخصائص مثل العرض والارتفاع والـ id . • ثم يتم اغلاق الوسم </canvas> . شرح مثال لرسم مربع من خلال العنصر Canvas : 1 – نكتب وسم التعريف . كود PHP: `<!DOCTYPE HTML>` 2 – نكتب الأوسمة التي نبدأ بها صفحتنا . يتم إستدعاء الكود في الحدث load للصفحة كود PHP: `<body onload="draw()">` . كود PHP: `<html> <head> <title> Canvas رسم مربع باستخدام العنصر</title> <** http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body onload="draw()">` 3 – نضع وسم <canvas> ..... </canvas> وبداخله ما يلي : • نعطي id لـ Canvas حتى نُمكِّن الجافا سكربت من الوصول إلى اللوحة والرسم عليها كود PHP: `id="Canvastest"` . • نقوم بتحديد ارتفاع وعرض لوحة الرسم الخاصة بنا كود PHP: `width="150" height="200"` . • نقوم بعمل ستايل لحدود لوحتنا (إن أردنا ذلك) كود PHP: `style="border:3px solid #FF7700;"` . • نضع جملة تظهر فى حال عدم دعم المتصفحات لعنصر canvas . وهكذا يكون الشكل النهائي للوسم : كود PHP: `<canvas id="Canvastest" border="3" width="150" height="200" style="border:3px solid #FF7700;"> Your browser does not support canvas </canvas>` 4 – نكتب كود الجافا سكربت الخاص بالرسم أو التصميم الذي نريده . كود PHP: `<script type="text/javascript"> function draw() { var canvas = document.getElementById('Canvastest'); var context = canvas.getContext('2d'); context.fillStyle = "#857"; context.fillRect(30,30,50,50); context.strokeStyle = "#ccccff"; context.lineWidth = 4; context.strokeRect(30,30,50,50); } </script>` شرح كود الجافا سكربت : 1 – عرفنا المتغير الأول canvas عن طريق ايجاده من خلال الـ id الخاص بالوسم الموجود في الـ html . كود PHP: `var canvas = document.getElementById('Canvastest');` 2 – عرفنا المتغير الثاني context بأنه سيكون عبارة عن شكل ثنائي الأبعاد 2D . كود PHP: `var context = canvas.getContext('2d');` 3 - استخدمنا fillStyle لعمل لون للشكل ( تقوم بتحديد لون التعبئة التي سوف يتم إستخدامها في عمليات الرسم في ال Context ). كود PHP: `context.fillStyle = "#857";` 4 - استخدمنا fillRect لعمل أبعاد الشكل ( رسم مربع مصمت باللون الذي تم تحديده من خلال الخاصية fillStyle ). كود PHP: `context.fillRect(30,30,50,50);` 5 - استخدمنا strokeStyle لعمل الوان الاستايل للشكل (عمل حد محيط للشكل) . كود PHP: `context.strokeStyle = "#ccccff";` 6 - استخدمنا lineWidth واعطينا له القيمة 4 . كود PHP: `context.lineWidth = 4;` 7 - استخدمنا StrokeRect واعطينا له القيم 30,30,50,50 (رسم مربع حدود بدون تعبئته بأي لون) . كود PHP: `context.strokeRect(30,30,50,50);` 5 - ثم نقوم بغلق الأوسمة الأساسية . المثال للتجربة : كود PHP: <!DOCTYPE HTML> <html> <head> <title> Canvas رسم مربع باستخدام العنصر</title> <** http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body onload="draw()"> <canvas id="Canvastest" border="3" width="150" height="200" style="border:3px solid #FF7700;"> Your browser does not support canvas </canvas> <script type="text/javascript"> function draw() { var canvas = document.getElementById('Canvastest'); var context = canvas.getContext('2d'); context.fillStyle = "#857"; context.fillRect(30,30,50,50); context.strokeStyle = "#ccccff"; context.lineWidth = 4; context.strokeRect(30,30,50,50); } </script> </body> </html>
عاليا مشرفة فريق التعلم الذاتي

13-10-2010, 02:35 AM	#9
عاليا مشرفة فريق التعلم الذاتي	رد: الدرس ( الرابع ) : HTML5 Canvas شرح رائع للعنصر Canvas باللغة العربية قلعة الأكواد - كلام في ال HTML5 الجزء الثالث
عاليا مشرفة فريق التعلم الذاتي

15-10-2010, 01:56 AM	#10
عاصم نت	رد: الدرس ( الرابع ) : HTML5 Canvas استاذ محمد لو حصل ننط هذا الدرس ونرجع لهـ بعديين.. يكون احسن ! يبدو ان المعنويات بدأت تتلاشى !!
عاصم نت
2

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 0 .
الموضوع لم يُقرأ بعد

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

الدرس ( الرابع ) : HTML5 Canvas

فريق التعلم الذاتي لبناء المواقع