HTML5: Canvas ATLS 3020 - Digital Media 2 Week 9 - Day 1 Schedule - - PowerPoint PPT Presentation
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
ATLS 3020 - Digital Media 2 Week 9 - Day 1
○ Project 2 Proposal is due ○ jQuery Animations
○ Labs 9, 10, 11, 12 are due ○ Quiz 2 ○ Work day
○ Project 2 Critiques
○ jQuery Review ○ HTML5 Canvas
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
concept and design well-thought-out and well-executed
good look and feel of the whole webpage, works on all screen sizes
project has some personal flair
code is running correctly (on all browsers) with no bugs
<canvas id="my_canvas" width="300" height="300"></canvas> HTML canvas = document.getElementById("my_canvas"); context = canvas.getContext("2d"); Javascript
HTML: Create the canvas element where you want it on on the webpage JS: 1. Get the html element.
fillRect(x, y, width, height) Javascript
Draws a filled rectangle
strokeRect(x, y, width, height) Javascript
Draws a rectangular outline
clearRect(x, y, width, height) Javascript
Clears the rectangle area Remember, these are functions of the canvas’ context, so to implement these functions, you need to use this syntax.
context.function(. . .); Javascript
fillStyle = "hex color" Javascript
Sets the fill color, pattern, or gradient
strokeStyle = "hex color" Javascript
Sets the stroke color, pattern, or gradient
The default fill and stroke color is black.
These properties are also part of the canvas’ context. To change the color of what is being drawn on the context, you must change the color of the context first.
// blue square context.fillStyle = "#00f"; context.fillRect(0, 0, 100, 100); // red square context.fillStyle = "#f00"; context.fillRect(100, 100, 100, 100); Javascript lineWidth = number Javascript
Sets the line thickness
createLinearGradient(x0, y0, x1, y1) Javascript
Paints along a line from (x0, y0) to (x1, yx)
createRadialGradient(x0, y0, r0, x1, y1, r1) Javascript
Paints along a cone between 2 circles
addColorStop(position, color) Javascript
Adds a color point to your gradient, position is between 0 and 1
var g = context.createLinearGradient(0, 0, 100, 100); g.addColorStop(0, "red"); g.addColorStop(1, "blue"); context.fillStyle = g; Javascript
Example Code
1. Create variable that holds linear gradient 2. Add color stops (as many as you want) 3. Set fillStyle equal to the gradient
beginPath() Javascript
Begin the path (like placing a pencil)
moveTo(x, y) Javascript
Moves pencil to specific place (without drawing)
closePath() Javascript
End the path You can make unique shapes by using “paths”
lineTo(x, y) Javascript
Draws to this point
fill() stroke() Javascript
Draw the fill and/or stroke of the path
drawImage(image, dx, dy) Javascript
Takes an image: draws it
drawImage(image, dx, dy, dw, dh) Javascript
Takes an image: scales and draws it You can do a lot a image manipulation with the canvas
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) Javascript
Takes an image: clips, scales, and draws it
var i = new Image(); i.src = "images/my_image.jpg"; i.onload = function() { drawImage(i, 10, 10); } Javascript
Example Code
1. Create an image object (this is like creating an image in javascript and storing it in a variable) 2. Set the source of the image 3. Create a load event. Set it equal to a function. 4. Inside of the function, call the drawImage() function.
arc(x, y, radius, startAngle, endAngle, anticlockwise) Javascript
To draw circles or arcs use the “arc” function as a path
center of the circle on which the arc should be drawn
define the start and end points of the arc in radians (not degrees)
value - true draws the arc anticlockwise, false clockwise
context.beginPath(); context.arc(350, 350, 300, 0, 2*Math.PI, 0); context.stroke(); Javascript
Circle Example Code
var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; context.beginPath(); context.arc(350, 350, 200, startAngle, endAngle, 0); context.stroke(); Javascript
Arc Example Code
fillText(text, x, y) Javascript
Adds text at that location
font = "font type" Javascript
Changes the font of the text
textAlign = "placement" Javascript
Changes the text alignment of the text
textBaseline = "placement" Javascript
Controls where the text is drawn relative to the starting point
Create a picture on the canvas. Your picture must contain these elements:
○ 5 rectangles ○ 2 paths ○ 2 arcs or circles
○ 1 gradient filled object ○ 3 object with different fill color ○ 3 with different stroke color
○ 1 image that is clipped or scaled ○ 1 line of text