Game Canvas
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });
Game Canvas
❮ Previous
Next ❯
The HTML <canvas> element is displayed as a rectangular object on a web page:
var myGameArea;
function startGame() {
myGameArea = new gamearea();
}
var x = 0, y = 0;
function gamearea() {
this.canvas = document.createElement("canvas");
this.canvas.width = 320;
this.canvas.height = 180;
document.getElementById("canvascontainer").appendChild(this.canvas);
this.context = this.canvas.getContext("2d");
this.context.scale(1.4, 1.4);
//var v = document.getElementById("video1");
var i;
//v.addEventListener("play", function() {
i = window.setInterval(function() {
myGameArea.context.clearRect(0, 0, myGameArea.canvas.width, myGameArea.canvas.height);
x++;
var ctx = document.getElementsByTagName("canvas")[0].getContext("2d");
//ctx.drawImage(v,5,5,260,125);
ctx.strokeStyle="#000000";
ctx.font="20px Georgia";
if (x > 0) {
ctx.strokeText("You can do anything",10,30);
}
if (x > 50) {
y += 0.5;
ctx.strokeText("on the canvas",10,50+y);
}
if (x > 250) {
clearInterval(i);
var ctx = document.getElementsByTagName("canvas")[0].getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("Try it!",140,100);
}
},20)//;}, false);
//v.addEventListener("pause", function() {window.clearInterval(i);}, false);
//v.addEventListener("ended", function() {
//}, false);
}
startGame();
HTML Canvas
The <canvas> element is perfect for making games in HTML.
The <canvas> element offers all the functionality you need for making games.
Use JavaScript to draw, write, insert images, and more, onto the
<canvas>
.getContext("2d")
The <canvas> element has a built-in object, called the getContext("2d") object, with methods and properties for drawing.
You can learn more about the <canvas> element, and the
getContext("2d")
Tutorial.
Get Started
To make a game, start by creating a gaming area, and make it ready for
drawing:
Example
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]);
}
}
Try it Yourself »
The object myGameArea will have
more properties and methods later in this tutorial.
The function startGame() invokes the method
start()
myGameArea
The
start()<canvas> element and inserts
it as the first childnode of the <body> element.
❮ Previous
Next ❯
