PHP


08

Apr 2016

The Default Controls – Google Map

Google Maps – The Default Controls When showing a standard Google map, it comes with the default control set: Zoom – displays a slider or “+/-” buttons to control the zoom level of the map Pan – displays a pan control for panning the map MapType – lets the user toggle between map types (roadmap and satellite) Street View – displays a Pegman icon which...

Read More


31

Mar 2016

SVG (Scalable Vector Graphics)

What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation SVG integrates with other W3C standards such as the DOM...

Read More


29

Mar 2016

HTML Canvas Coordinates

Canvas Coordinates The HTML canvas is a two-dimensional grid. The upper-left corner of the canvas has the coordinates (0,0) In the previous chapter, you saw this method used: fillRect(0,0,100,65). This means: Start at the upper-left corner (0,0) and draw a 100×65 pixels rectangle.    


29

Mar 2016

HTML Canvas Can Do ?

HTML Canvas Can Draw Text Canvas can draw colorful text, with animation or without animation.   HTML Canvas Can Draw Graphics Canvas has great features for graphical data presentation with an imagery of graphs and charts. HTML Canvas Can be Animated Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations. HTML Canvas Can be Interactive Canvas can respond to JavaScript...

Read More


29

Mar 2016

Add an object onto the game screen

Add Object Make a component constructor, which lets you add components onto the¬†screen. The object constructor is called component, and we make our first component, called myGamePiece:   Source Code:¬† <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } </style> </head> <body onload=”startGame()”> <script> var myGamePiece; function startGame() { myGameArea.start(); myGamePiece = new component(30, 30, “green”, 10,...

Read More


29

Mar 2016

Complete Game in HTML

This is simple HTML game. Source Code: <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> <style> canvas { border:1px solid blue; background-color: orange; } </style> </head> <body onload=”startGame()”> <script> var myGamePiece; var myObstacles = []; var myScore; function startGame() { myGamePiece = new component(30, 30, “red”, 10, 120); myGamePiece.gravity = 0.05; myScore = new component(“30px”, “Consolas”, “black”, 280, 40, “text”); myGameArea.start(); } var myGameArea =...

Read More


11

Mar 2016

Embed SVG Directly Into HTML Pages

<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width=“100” height=“100”> <circle cx=“50” cy=“50” r=“40” stroke=“green” stroke-width=“4” fill=“yellow” /> </svg> </body> </html>   Output:-



Page 2 of 512345