Lecture 10

Images, Audio and Keyboard control

slid.es/jkohlin/js-10/live

Drawing images on Canvas

 

1. The image object can be in your HTML

<body>
    <img src="birds.png" id="bird-pic" width="34" height="72">
</body>

2. Or you can create one in JS

var img = new Image();
img.src = "birds.png";

var img = document.getElementById("bird-pic");

Step 1: creating the image source object

Step 2: drawing the image to canvas

The simple way:

var img = new Image();
img.src = "birds.png";

ctx.drawImage(img, 0,0); 
//(imageSource, startX, startY)

The advanced way:

var img = new Image();
img.src = "birds.png";

//ctx.drawImage(image, sx, sy, sw,  sh,  dx,  dy,  dw,  dh)
ctx.drawImage(  img,   50, 70, 300, 300, 100, 300, 400, 400)

Step 2: drawing the image to canvas

IMAGe sprites 

var canvas = document.getElementById("stage")
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "birds.png";

ctx.drawImage(
    img,
    /*crop tool insert point:*/ 0, 0, 
    /*crop box width & height:*/40, 40, 
    /*placement on canvas:*/ 160, 160, 
    /*size on canvas:*/ 40, 40);


         /*
          The advantage of loading a 
          sprite sheet is that you 
          only need to make one request
          which speeds up the page load
          and animations.
         */

IMAGe sprites 

var canvas = document.getElementById("stage")
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "birds.png";

ctx.drawImage(
    img,
    /*crop tool insert point:*/ 0, 40, 
    /*crop box width & height:*/40, 40, 
    /*placement on canvas:*/ 160, 160, 
    /*size on canvas:*/ 40, 40);


         /*
          The advantage of loading a 
          sprite sheet is that you 
          only need to make one request
          which speeds up the page load
          and animations.
         */

IMAGe sprites 

var canvas = document.getElementById("stage")
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "birds.png";

ctx.drawImage(
    img,
    /*crop tool insert point:*/ 0, 80, 
    /*crop box width & height:*/40, 40, 
    /*placement on canvas:*/ 160, 160, 
    /*size on canvas:*/ 40, 40);


         /*
          The advantage of loading a 
          sprite sheet is that you 
          only need to make one request
          which speeds up the page load
          and animations.
         */

How can you animate this sprite sheet?

make the bird fly!

var canvas = document.createElement('canvas');
body.appendChild('canvas');
var ctx = canvas.getContext('2d');
var frames = [0, 40 ,80, 40];
var index = 0;
var img = new Image()
img.src = "https://kohlin.net/sparrow.gif"

function fly(){
    ctx.clearRect(160,160, 40, 40)
    ctx.drawImage(
        img,
        /*crop tool insert point:*/ 0, frames[index++],
        /*crop box width & height:*/40, 40, 
        /*placement on canvas:*/ 60, 60, 
        /*size on canvas:*/ 40, 40);

    if (index > 3) index = 0;

    setTimeout(fly, 500); 

    /* requestAnimationFrame 
       calls the function 
       every 17 ms, which 
       is a bit too fast 
    */
}

Fly flappy!

http://codepen.io/jkohlin/pen/xqvLWj

Adding text

Text

http://codepen.io/jkohlin/pen/WGoywY

fillStyle = color  
strokeStyle = color


font = "[font style] [font weight] [font size] [font face]"
textAlign = [left] [center] [right]
textBaseline = [top] [hanging] [middle] [alphabetic] [ideographic] [bottom]


fillText(message, x, y, maxwidth) -maxwidth is optional
strokeText(message, x, y, maxwidth)
measureText(message).width -returns the total width of the message

Audio

The HTML <audio> element

<audio src="music.mp3" id="sound" controls autoplay>

    No sound for you <br>
    Get new browser!

</audio>

Audio

<audio src="music.mp3" id="sound" controls autoplay>

    No sound for you <br>
    Get new browser!

</audio>

all attributes

Audio

Finding it with JavaScript

<audio src="music.mp3" id="sound" controls autoplay>

    No sound for you <br>
    Get new browser!

</audio>
var sound = document.getElementById("sound");

// methods
sound.play();
sound.pause();

// properties can be read or written
sound.volume = 0.4; 
sound.controls = true;
sound.loop = true;

All properties, methods and events

Keyboard control

Keyboard events

What key was pressed?

document.addEventListener("keydown", function(eventObj){
    console.log(eventObj.key);
});
Event Description
keydown When any key on the keyboard is pressed
keyup When any key on the keyboard is released
keypress Ignores Shift, Ctrl, Alt, Tab, Cmd, Win, Arrow keys 

Complete reference

Device orientation event

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) {
  var alpha    = event.alpha; // 0 to 360
  var beta     = event.beta;  // -180 to 180
  var gamma    = event.gamma; // -90 to 90

  // Do stuff with the new orientation data
}

reference

Demo (mobile only)

https://kohlin.net/dg/deviceOrientation/

Canvas + Image + Audio + Keyboard Control

By Johan Kohlin

Canvas + Image + Audio + Keyboard Control

  • 619

More from Johan Kohlin