آموزش‌های پایه HTML5

API HTML5

رسانه‌های HTML5

تصاویر HTML5

SVG المدمج في HTML5 عناصر جديدة في HTML5

Canvas في HTML5

برچسب <canvas> که به تازگی به HTML5 اضافه شده است، یک عنصر HTML است که می‌توانید از اسکریپت (معمولاً JavaScript) در آن تصاویر بکشید. می‌توان از آن برای ایجاد آلبوم عکس یا ساخت انیمیشن‌های ساده (یا نه خیلی ساده) استفاده کرد، حتی می‌توان از آن برای پردازش و رندرینگ ویدیوهای زنده استفاده کرد.

برچسب <canvas> برای تعریف تصاویر مانند نمودارها و دیگر تصاویر استفاده می‌شود و شما باید از اسکریپت برای ترسیم تصاویر استفاده کنید.

یک مستطیل قرمز، مستطیل تغییر رنگ‌دهی، مستطیل رنگی و چندین متن رنگی روی کanvas (Canvas) بکشید.

canvas چیست؟

عنصر <canvas> HTML5 برای ترسیم تصاویر استفاده می‌شود و توسط اسکریپت (معمولاً JavaScript) انجام می‌شود.

برچسب <canvas> فقط یک جعبه تصویری است و شما باید از اسکریپت برای ترسیم تصاویر استفاده کنید.

شما می‌توانید از روش‌های مختلف برای ترسیم مسیرها، جعبه‌ها، دایره‌ها، حروف و اضافه کردن تصاویر در canvas استفاده کنید.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبانی‌کننده از عنصر <canvas> است.

عنصر
الوصف	4.0	9.0	2.0	3.1	9.0

ایجاد یک کanvas (Canvas)

یک کanvas در یک صفحه وب یک مستطیل است که توسط عنصر <canvas> ترسیم می‌شود.

ملاحظة: بصورت پیش‌فرض، عنصر <canvas> دارای حاشیه و محتوایی نیست.

<canvas> بسيط مثال كما يلي:

<canvas id="myCanvas" width="200" height="100"></canvas>

ملاحظة: عادةً، يجب تحديد صفة id للـ tag (يتم استدعاؤه في النصوص) تعين صفات width وheight حجم الشاشة.

إشارة:يمكنك استخدام عدة عناصر <canvas> في صفحة HTML.

يمكن استخدام صفة style لإضافة الحواف:

مثال

<!DOCTYPE html><html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليمي أساسي (oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</script>
</body>

</html>

استخدام JavaScript لرسم الصور

لا يمتلك عنصر canvas القدرة على الرسم. يجب إكمال جميع أعمال الرسم داخل JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
لم يتم دعم جافا سكريبت لـ tag "HTML5 canvas" من قبل متصفحك.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>
</body>

</html>

تحليل المثال:

أولاً، ابحث عن عن عنصر <canvas>.

var c=document.getElementById("myCanvas");

ثم، أنشئ object "context":

var ctx=c.getContext("2d");

مثل object "getContext("2d")" هو جزء من HTML5 المدمج، ويملك العديد من طرق الرسم مثل المسارات، المستطيلات، الدوائر، النصوص، وإضافة الصور.

تقوم السطور التالية برسم مستطيل أحمر:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

يمكن تعيين صفة fillStyle كونها لون CSS، تدرج، أو نمط. fillStyle الإعداد الافتراضي هو #000000 (أسود).

fillRect(x,y,عرض,طولتعريف الطريقة الحالية للملء للمستطيل.

مقياس Canvas

الشاشة هي شبكة ثنائية.

مقياس اليسرى العلوي للشاشة هو (0,0)

يملك طريقة fillRect مع المعلمات (0,0,150,75).

يعني: رسم مستطيل 150x75 على الشاشة، من الزاوية العلوية اليسرى (0,0).

مثال على المقياس

كما يظهر في الشكل التالي، يستخدم مقياس X وY للرسم على الشاشة. يظهر مقياس التوضيح عند تحريك الفأرة في المربع المائل.

Canvas - مسار

لرسم الخطوط على Canvas، سنستخدم طريقتين:

moveTo(x,y) تحديد بداية الخط
lineTo(x,y) تحديد نهاية الخط

لرسم الخطوط، يجب استخدام طريقة "ink" مثل stroke().

مثال

تحديد البداية (0,0) والنهاية (200,100). ثم استخدام طريقة stroke() لرسم الخط:

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
</script>
</body>

</html>

لرسم الدوائر في canvas، سنستخدم الطرق التالية:

arc(x,y,r,start,stop)

في الواقع، عند رسم الدوائر، نستخدم طريقة "ink" مثل stroke() أو fill().

مثال

يتم رسم دائرة باستخدام طريقة arc():

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}　
</script>
</body>

</html>

Canvas - نص

لرسم النص على canvas، هناك خصائص ومتغيرات مهمة كما يلي:

font - تعريف الخط
fillText(text,x,y) - رسم نص ملون على canvas
strokeText(text,x,y) - رسم نص فارغ على canvas

استخدام fillText():

مثال

يتم رسم نص عالي 30px باستخدام الخط "Arial" على لوحة الرسوم (ملون):

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
}
</script>
</body>

</html>

استخدام strokeText():

مثال

يتم رسم نص عالي 30px باستخدام الخط "Arial" على لوحة الرسوم (مكتمل):

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
}
</script>
</body>

</html>

Canvas - تدرج

يمكن للتدرج أن يملأ المثلثات، الدوائر، الخطوط، النصوص، وأشكال أخرى يمكن تحديدها بأساليب مختلفة.

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

createLinearGradient(x,y,x1,y1) - إنشاء تدرج خطي
createRadialGradient(x,y,r,x1,y1,r1) - إنشاء تدرج دائري/دائري

عند استخدام كائن التدرج، يجب استخدام لونين أو أكثر من ألوان التوقف.

مетод addColorStop() يحدد توقف الألوان، ويستخدم المعاملات المحددة بالتوازي لوصفها، يمكن أن تكون بين 0 و 1.

استخدم التدرج، وقم بتعيين قيمة fillStyle أو strokeStyle إلى استخدم التدرج، ثم أرسم الشكل، مثل المربع، النص، أو الخط.

استخدام createLinearGradient():

مثال

إنشاء تدرج خطي. استخدم التدرج لملء المربع:

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
// إنشاء تدرج
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// ملء بالتدرج
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
</script>
</body>

</html>

استخدام createRadialGradient():

مثال

إنشاء تدرج دائري/حلقي. استخدم التدرج لملء المربع:

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
// إنشاء تدرج
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// ملء بالتدرج
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
</script>
</body>

</html>

Canvas - صورة

ضع صورة على اللوحة باستخدام الطريقة التالية:

drawImage(صورة, x, y)

استخدم صورة:

مثال

ضع صورة على اللوحة:

JavaScript:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<p>صورة الاستخدام:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة الـ HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　img=document.getElementById("scream");
　　　　img.onload　=　function()　{
ctx.drawImage(img,10,10);　
}
</script>
</body>

</html>

اختبار الرابط ‹/›

دليل مرجعي لـ HTML Canvasيمكنك مراجعة الخصائص الكاملة للعلامة في

دليل مرجعي لـ Canvas

علامة <canvas> في HTML	العلامة
الوصف	<canvas>

SVG المدمج في HTML5 عناصر جديدة في HTML5