• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Image Draw and Controlling with Keyboard
 

HTML5 Image Draw and Controlling with Keyboard

on

  • 4,497 views

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

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

Statistics

Views

Total Views
4,497
Views on SlideShare
4,497
Embed Views
0

Actions

Likes
0
Downloads
33
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Image Draw and Controlling with Keyboard HTML5 Image Draw and Controlling with Keyboard Document Transcript

    • 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
    • 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
    • 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
    • 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
    • { 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