Instead, you will add key listeners to either the document or window objects to detect key events. The canvas element is not a focusable element, and therefore in light of the preceding paragraph, adding key listeners to a canvas is an exercise in futility. If no element has focus, key events bubble up to the window and document objects. Those events are targeted at the HTML element that currently has focus. When you press a key in a browser window, the browser generates key events. In the Chapter 4 and throughout the rest of this book, you will see more advanced uses for drawImage(). The sprite sheet application uses drawImage() in the simplest possible way: The application draws all of an image, unscaled, that is stored in an Image object, into the application’s canvas. That single method lets you copy all or part of an image stored in one place to another place, and if you wish, you can scale the image along the way. The example shown in Figure 1.14 uses the 2d context’s drawImage() method to draw the sprite sheet. NOTE: The Canvas context’s drawImage() method onmousedown = function (e ) drawBackground () For example, you can listen to mouse down events, like this: canvas. Mouse Eventsĭetecting mouse events in a canvas is simple enough: You add an event listener to the canvas, and the browser invokes that listener when the event occurs. Nearly all Canvasbased applications handle either mouse or touch events-or both-and many applications also handle various events such as keystrokes and drag and drop.
#Open canvas 6 mouse code
You register event listeners with HTML elements and implement code that responds to those events. Core HTML5 Canvas: Graphics, Animation, and Game Development
0 kommentar(er)
