HTML5 Canvas Graphics
يُستخدم عنصر <canvas> في HTML لرسم الرسومات على صفحة الويب.
ما هو Canvas؟
يمنحك عنصر <canvas> طريقة سهلة وفعالة لرسم الرسومات باستخدام JavaScript.
عنصر <canvas> ليس سوى حاوية للرسومات يجب عليك استخدام JavaScript لرسم الرسومات بالفعل.
يمكن استخدامه لرسم الرسوم البيانية(مثل المربعات والدوائر..إلخ) ، وإنشاء تكوينات للصور أو عمل رسوم متحركة ورسم النصوص.
الـ canvas عبارة عن منطقة مستطيلة ثنائية الأبعاد:
- إحداثيات الزاوية العلوية اليسرى هي (0 ، 0) والتي تُعرف بالأصل.
- إحداثيات الركن الأيمن السفلي هي (عرض canvas، ارتفاع canvas).
رسم المسارات والأشكال بإستخدام عنصر 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
توضيح أهم الطرق المستخدمة فى رسمة الخط السابقة هي:
- ()moveTo: تحدد هذه الطريقة موضع مؤشر الرسم على الـ Canvas.
- ()lineTo: تُستخدم هذه الطريقة لتحديد إحداثيات نقطة نهاية الخط.
- ()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:
<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
يمكنك أيضًا تعبئة لون التدرج داخل أشكال الـ 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
شكرًا لك على مساعدتك لنا!