وHTML <canvas> يتم عرض عنصر ككائن مستطيلة على صفحة ويب:
HTML قماش
و <canvas> عنصر مثالي لصنع الالعاب في HTML.
و <canvas> عنصر يقدم كافة الوظائف التي تحتاج إليها لصنع الالعاب.
استخدام جافا سكريبت لرسم والكتابة وإدراج الصور، وأكثر من ذلك، على <canvas> .
.getContext ( "2D")
و <canvas> العنصر له المدمج في الكائن، ودعا getContext("2d") الكائن، مع الأساليب والخصائص للرسم.
يمكنك معرفة المزيد عن <canvas> عنصر، و getContext("2d") كائن، لدينا في قماش التعليمي .
ابدأوا
لجعل لعبة، تبدأ من خلال إنشاء منطقة الألعاب، وجعلها جاهزة للرسم:
مثال
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
انها محاولة لنفسك » الكائن myGameArea سيكون هناك المزيد من الخصائص والأساليب في وقت لاحق في هذا البرنامج التعليمي.
وظيفة startGame() استدعاء طريقة start() من myGameArea الكائن.
في start() الأسلوب بإنشاء <canvas> عنصر وإدراج بأنها childnode أول <body> العنصر.