HTML5: Canvas ATLS 3020 - Digital Media 2 Week 9 - Day 1
Schedule ● Today ● Monday, March 16 ○ jQuery Review ○ Labs 9, 10, 11, 12 are due HTML5 Canvas Quiz 2 ○ ○ ○ Work day ● Wednesday, March 11 ● Wednesday, March 18 Project 2 Proposal is due Project 2 Critiques ○ ○ ○ jQuery Animations
Project 2: Animation Create an animation in HTML5, Javascript, and/or jQuery. This can be a stand alone animation or you can add it on to Project 1. Be creative! Your project plan should include the following: description of your project ○ ○ pseudocode for algorithms and program flow ○ visual design template or example ○ brief description of how you will test your project
Project 2: Rubric 25% Concept concept and design well-thought-out and well-executed 25% Aesthetics good look and feel of the whole webpage, works on all screen sizes 25% Creativity project has some personal flair 25% Technicality code is running correctly (on all browsers) with no bugs
Canvas ● HTML5 Element ● Create graphic objects in HTML and manipulate them in javascript and CSS3 ● Similar to Photoshop or Illustrator Canvas
Canvas: Manipulation To access the canvas you need both HTML and Javascript. HTML <canvas id="my_canvas" width="300" height="300"></canvas> Javascript canvas = document.getElementById("my_canvas"); context = canvas.getContext("2d"); HTML: Create the canvas element where you want it on on the webpage JS: 1. Get the html element. 2. Get the element’s context. We will draw on the context.
Rectangle Functions Javascript Draws a filled rectangle fillRect(x, y, width, height) Javascript Draws a rectangular outline strokeRect(x, y, width, height) Javascript Clears the rectangle area clearRect(x, y, width, height) Remember, these are functions of the canvas’ context, so to implement Javascript these functions, you need to use this context.function(. . .); syntax.
Drawing Properties The default fill and stroke color is black. Javascript Sets the fill color, pattern, or gradient fillStyle = "hex color" Javascript Sets the stroke color, pattern, or gradient strokeStyle = "hex color" Javascript Sets the line thickness lineWidth = number Javascript These properties are also part of the // blue square context.fillStyle = "#00f"; canvas’ context. To change the color of context.fillRect(0, 0, 100, 100); what is being drawn on the context, you // red square must change the color of the context context.fillStyle = "#f00"; first. context.fillRect(100, 100, 100, 100);
Paired Exercise Re-create this painting (or something similar)
Gradients Paints along a line from (x0, y0) to Javascript (x1, yx) createLinearGradient(x0, y0, x1, y1) Javascript Paints along a cone between 2 circles createRadialGradient(x0, y0, r0, x1, y1, r1) Adds a color point to your gradient, Javascript position is between 0 and 1 addColorStop(position, color) Javascript Example Code var g = context.createLinearGradient(0, 0, 100, 100); 1. Create variable that holds linear gradient g.addColorStop(0, "red"); 2. Add color stops (as many as you want) g.addColorStop(1, "blue"); 3. Set fillStyle equal to the gradient context.fillStyle = g;
Paths You can make unique shapes by using “paths” Javascript Begin the path (like placing a pencil) beginPath() Moves pencil to specific place Javascript moveTo(x, y) (without drawing) Javascript Draws to this point lineTo(x, y) Javascript End the path closePath() Javascript fill() Draw the fill and/or stroke of the path stroke()
Images You can do a lot a image manipulation with the canvas Javascript Takes an image: draws it drawImage(image, dx, dy) Javascript Takes an image: scales and draws it drawImage(image, dx, dy, dw, dh) Takes an image: clips, scales, and Javascript draws it drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) Example Code Javascript 1. Create an image object (this is like creating an image var i = new Image(); in javascript and storing it in a variable) i.src = "images/my_image.jpg"; i.onload = function() { 2. Set the source of the image drawImage(i, 10, 10); 3. Create a load event. Set it equal to a function. } 4. Inside of the function, call the drawImage() function.
Paired Exercise 1. Comment out your last drawing. 2. Create a new drawing (on the same canvas) with these 3 things: a. a rectangle filled with a gradient b. a diamond (created with a path) c. an image
Circles To draw circles or arcs use the “arc” function as a path Javascript ● x and y are the coordinates of the arc(x, y, radius, startAngle, endAngle, anticlockwise) center of the circle on which the arc should be drawn ● radius is the radius of the arc ● startAngle and endAngle define the start and end points of the arc in radians (not degrees) ● anticlockwise is a Boolean value - true draws the arc anticlockwise, false clockwise
Circle Example Code - This creates a circle . . . - with x, y at (350, 350) . . . Javascript - with radius of 300 px - The arc line will start at 0 radians . . . context.beginPath(); - and end at 2π radians . . . context.arc(350, 350, 300, 0, 2*Math.PI, 0); context.stroke(); - and it will be drawn clockwise Arc Example Code Javascript - This creates an arc . . . var startAngle = 1.1 * Math.PI; - with the center x, y at (350, 350) . . . var endAngle = 1.9 * Math.PI; - with radius of 200 px - The arc line will start at 1.1π radians . . . context.beginPath(); - and end at 1.9π radians . . . context.arc(350, 350, 200, startAngle, endAngle, 0); - and it will be drawn clockwise context.stroke();
Text Function and Properties Javascript Adds text at that location fillText(text, x, y) Javascript Changes the font of the text font = "font type" Javascript Changes the text alignment of the text textAlign = "placement" Javascript Controls where the text is drawn textBaseline = "placement" relative to the starting point
Lab 11 Create a picture on the canvas. Your picture must contain these elements: ● Objects ○ 5 rectangles ○ 2 paths ○ 2 arcs or circles ● Fill/Stroke Color ○ 1 gradient filled object ○ 3 object with different fill color ○ 3 with different stroke color ● Misc ○ 1 image that is clipped or scaled ○ 1 line of text
Recommend
More recommend
