المقدمة
اهلا بك في موقعنا لتعلم الكانفس نرجو ان تحقق اقصى استفادةمقدمة عن Canvas
الكانفس او Canvas : هو عبارة عن عنصر HTML يمكنك الرسم بداخله بواسطة HTML و جافا سكربت دون الاستعانة باضافات خارجية مثل فلاش او جافاالكانفس ليس سوى حاوية (conteiner) للرسومات (الجرافيكس)
استخداماته
- الالعاب
- الرسومات(Graphics)
- التمثيل البياني
- انميشن
- تعديل الصور
- مشغل فيديو او صوت
ماذا احتاج ؟
يجب عليك معرفة هذه اللغات
- HTML
- CSS
- Javascript
يجب التنويه ان الرسومات كلها تكتب بالجافاسكربت
امثلة من موقع codepen
هذا امثلة لما يمكنك صنعه بالكانفس1- تمثيل بياني
See the Pen Linechart by Jappe (@jappe) on CodePen.
1- لعبة بسيطة
يمكنك اللعب بازرار (W,A,S,D)See the Pen Simple Canvas Game by François Lajoie (@1franck) on CodePen.
3- هذا مثال معقد
See the Pen The Last Experience by Gerard Ferrandez (@ge1doot) on CodePen.
بناء اول Canvas
الكانفس مثل بقية عناصر HTML عنصر<canvas>
<canvas></canvas>
<canvas>
<canvas width="300" height="150" class="first-canvas"> </canvas>
العرض والارتفاع في الكود اعلاه هما القيمة الافتراضية
ايضا يمكنك تعديل بعض خصائص الكانفس بواسطة CSS لكن لا يمكنك الرسم داخله كما سنفعل بالجافاسكربت
تعرف على Context
سنبدا اولا بكود HTML ونوضح موقع الكانفس
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
</head>
<body>
<canvas id="my-canvas"></canvas>
</body>
</html>