1 / 9

HTML5 Canvas

HTML5 Canvas. 24 April 2014. Drawing pictures in HTML (and Javascript ). Rectangles Arcs Lines Features we won’t look at Images Drag and drop Animation Widely supported. How to do it. Canvas tag in HTML Id required Resizing must be done in tag, NOT CSS

olathe
Download Presentation

HTML5 Canvas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Canvas 24 April 2014

  2. Drawing pictures in HTML(and Javascript) • Rectangles • Arcs • Lines • Features we won’t look at • Images • Drag and drop • Animation • Widely supported

  3. How to do it • Canvas tag in HTML • Id required • Resizing must be done in tag, NOT CSS • If you go outside canvas, no error, just doesn’t show • JavaScript to DRAW: step by step

  4. Set up • Need to identify the canvas • Create a javaScript object that represents the canvas (context) • Methods associated with object var canvas = document.getElementById("rectangles"); var context = canvas.getContext("2d"); • Code needs to wait until loading completes document.addEventListener('DOMContentLoaded',domloaded,false); function domloaded() { } • Drawn in order of execution

  5. rectangles • Most straightforward • Define by location of upper left corner and size • Grid is defined with (0,0) as upper left corner context.fillRect(x, y, width, height); • Set color and then define the rectangle context.fillStyle= "#EF5B84"; context.fillRect(100, 100, 100, 200); • Color • Always a string • Same formats as in CSS • Opacity: applies to what follows context.globalAlpha= 0.5;

  6. gradients • Need to create a gradient object var gradient = context.createLinearGradient(x0, y0, x1, y1); • If x’s or y’s are 0, no change in that direction • If non-zero, must match the rectangle locations • Stops gradient.addColorStop(0, “blue"); gradient.addColorStop(1, “#FFFFFF"); • Can have as many transitions as you want • Define at relative points from 0 to 1 • Define color at that point • Use gradient rather than color in fillStyle context.fillStyle= gradient;

  7. arcs • Circles and arcs context.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 */ • Fill context.fillStyle = "#000"; context.fill(); • Ink context.strokeStyle= "#000"; context.stroke();

  8. lines • Pencil up, pencil down • Start (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();

  9. resources • Mark Pilgrim, Dive into HTML5 • Chapter 4: Let’s Call it a Draw(ing Surface) • HTML5 Canvas Basic Tutorials

More Related