HTML5 Image Draw and Controlling with Keyboard

5,305 views

Published on

This article describe HTML5 Basic like Using Canvas, Image Draw and Controlling Character with Keyboard

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,305
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Image Draw and Controlling with Keyboard

  1. 1. HTML5 Image Draw and Controlling with KeyboardBy Kamal SharmaRequirementsBasic of JavaScriptHTML5 CanvasThe canvas element is part of HTML5 and provides ability to draw 2D shapes and images.Creating and Using Canvas ElementCreating Canvas Element in HTML<canvas id="canvas" width=" "500px" height="500px"></canvas>Creating Canvas Element in JavaScriptvar canvas = document.createElement( document.createElement(canvas) ;canvas.setAttribute(id,canvas ; canvas)canvas.setAttribute(width width,500px) ;canvas.setAttribute(height height,500px) ;document.body.appendChild(canvas) ;document.body.appendChild(cUsing Canvas Elementvar ctx = document.getElementById( document.getElementById(canvas).getContext(2d) ;Example of Drawing Images on Canvas using JavaScriptimg = new Image() ;img.src = url ;ctx.drawImage(img, x, y) ;Create Image Draw Function, Store Properties and Access Properties 1
  2. 2. function drawImage(image,x,y){ img = new Image() ; img.src = url ; ctx.drawImage(image, x, y) ;}JSON Data for Retrieving and Storing Image Properties<script type="text/javascript"> var data= { img1 : { x : 10, y : 10, image : images/tiki_user.png } } </script>Accessing JSON Data in JavaScriptdata[img1][x] ;Implementation with TimerStart Task Function works with Timer, this function will initialize and call on every tick of timer.function startTask(){ drawImage(data[img1][x], data[img1][y], data[img1][image]) ;}Init Function will call first when document is loaded.function init(){ return setInterval(startTask, 10) ;}And call withwindow.onload = function(){ init() ;} 2
  3. 3. See the screenshot look like blurry Image, drawImage function create image on every tick tick.Need to clear the previous data in canvas with clearRect() function. clearRect(x, y, width, height).// Clear the canvasfunction clear(){ ctx.clearRect(0, 0, 5 500, 500) ;}Moving Image with Keyboardwindow.onkeydown - An event handler for the keydown event on the windowSyntax : window.onkeydown = function/functionRef ;// Key Eventswindow.onkeydown = function function(e){ var keyCode = e.keyCode || e.which || window.Event ; // 37 - Left Arrow if(keyCode == 37) { data[img1][x -= 20 ; x] } // 39 - Right Arrow if(keyCode == 39) { data[img1][x += 20 ; x] }} 3
  4. 4. Left and Right Arrow update the x of image properties properties.When using arrow key also create new image from current x and y position of data properties. Soneed to call the clear before beginning of drawImage. It will clear the canvas and draw new imagewith updated x and y position.Update the functionfunction startTask(){ clear() ; drawImage(data[img1 img1][x], data[img1][y], data[img1 img1][image]) ;}Complete Source<script type="text/javascript"> "text/javascript"> var data= { img1 : { x : 10, y : 10, image : images/tiki_user.png } }</script><canvas id="canvas" width="800px" height="500px"></canvas> "800px"<script type="text/javascript"> "text/javascript"> var ctx = document.getElementById( document.getElementById(canvas).getContext(2d ; 2d) function init() { setInterval(startTask, 10) ; } // Clear the canvas function clear() { ctx.clearRect(0 0, 500, 500) ; 0, } // Images Draw function drawImage(x,y,url x,y,url) 4
  5. 5. { img = new Image() ; img.src = url ; ctx.drawImage(img, x, y) ; } function startTask() { clear() ; drawImage(data[img1][x], data[img1][y], data[img1][image]) ; } // Key Events window.onkeydown = function(e) { var keyCode = e.keyCode || e.which || window.Event ; // 37 - Left Arrow if(keyCode == 37) { data[img1][x] -= 20 ; } // 39 - Right Arrow if(keyCode == 39) { data[img1][x] += 20 ; } } window.onload = function() { init() ; }</script> Based on HTML5 Game Fun2hit - http://apps.facebook.com/fun-two-hit/ 5

×