html5 canvas. saving information between function calls
Post on 20-Jan-2016
214 Views
Preview:
TRANSCRIPT
HTML5 CANVAS
SAVING INFORMATION
BETWEEN FUNCTION CALLS
Can I keep information between calls to a function?Why would I want to do it?
PossibilitiesStore and retrieve values from the HTML page
Possible but can be cumbersomeHave a javaScript variable OUTSIDE the function Known as a global variable
Snippets for the carouselelem_ illustrates writing to src outside of a form
SAVING INFORMATION
CANVAS
RectanglesArcsLines
Features we won’t look at Images Drag and drop Animation
Widely supported
DRAWING PICTURES IN HTML(AND JAVASCRIPT)
Canvas tag in HTMLId requiredResizing must be done in tag, NOT CSSIf you go outside canvas, no error, just doesn’t show
<canvas id=“c" height="400" width="800"></canvas> JavaScript to DRAW: step by step
HOW TO DO IT
Need to identify the canvas Create a javaScript object that represents the canvas (context) Methods associated with objectvar canvas = document.getElementById(“c");var context = canvas.getContext("2d");
Code needs to wait until loading completes Onload Faster alternative
document.addEventListener('DOMContentLoaded',domloaded,false);function domloaded() {}
Drawn in order of execution
SET UP
Most straightforwardDefine by location of upper left corner and size
Grid is defined with (0,0) as upper left cornercontext. fillRect(x, y, width, height);
Set color and then define the rectanglecontext.fi llStyle = "#EF5B84";context.fi llRect(100, 100, 100, 200);
Color Always a string Same formats as in CSS
Opacity: applies to what followscontext.globalAlpha = 0.5;
RECTANGLES
Circles and arcscontext.arc(x, y, radius, start-angle, end-angle, dir);
Outline (“pencil”) and then draw (“ink”) Pencil
context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2, false); context.closePath(); /* closes the shape */
Fillcontext.fi llStyle = "#000"; context.fi ll();
Inkcontext.strokeStyle = "#000"; context.stroke();
ARCS
Pencil up, pencil downStart (same as arcs)
context.beginPath();Position
context.moveTo(x,y);Draw (pencil)
context.lineTo(x,y); If you want to close the shape (same as arcs)
context.closePath(); Ink (same as arc)
context.strokeStyle = "#000"; context.stroke();
LINES
Mark Pilgrim, Dive into HTML5 Chapter 4: Let’s Call it a Draw(ing Surface)
HTML5 Canvas Basic Tutorials
RESOURCES
top related