![Page 1: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/1.jpg)
Lecture 23HTML5 Drawing Canvas and Video
*
* Course logo spider web photograph from Morguefile openstock photograph by Gabor Karpati, Hungary.
![Page 2: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/2.jpg)
The Canvas
ØA general purpose drawing canvasØMany of the standard capabilities:
ØCurves, filled solids, text, effects, …
ØLearning curve probably depends,ØConventions look standard to one
familiar with multiple graphic APIs.
ØBrief introduction here through an animated spinny.
4/12/17 Slide 2CSU CT 310, Web Development, ©Ross Beveridge
![Page 3: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/3.jpg)
4/12/17 Slide 34/12/17 Slide 3CSU CT 310, Web Development, ©Ross Beveridge
![Page 4: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/4.jpg)
PHP/HTML Code
ØNot much happening here …
4/12/17 Slide 4CSU CT 310, Web Development, ©Ross Beveridge
Here is a blank … (what shall we call it? :-) where drawing will later take place.
![Page 5: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/5.jpg)
In case we never discussed it before, placing an image into a part of a page using CSS is very different from using an HTML img tag.
CSS Code
ØNot much here eitherØ but see background …
4/12/17 Slide 5CSU CT 310, Web Development, ©Ross Beveridge
![Page 6: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/6.jpg)
4/12/17 Slide 6
Spinny.js – Setup/Globals.
4/12/17CSU CT 310, Web Development, ©Ross Beveridge
Slide 6
Note the use of the Math library.
Also think about how theta will be made to vary with time.
![Page 7: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/7.jpg)
Spinny.js – Initialization.
ØThe animation is set in motion using a JavaScript initialization function.
4/12/17 Slide 7CSU CT 310, Web Development, ©Ross Beveridge
function init() {stones = document.getElementById("stones");contxt = stones.getContext('2d');placeDots();setTimeout(doStep, 100);
}
![Page 8: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/8.jpg)
Spinny.js – Place Dots.
ØThere are ten dots.ØEach drawn by the drawDot function.
4/12/17 Slide 8CSU CT 310, Web Development, ©Ross Beveridge
function placeDots() {contxt.clearRect(0, 0, stones.width, stones.height);for (i = 0; i < 10; i++) {
row = voff + (radius * Math.cos(theta + (i * delta)));col = hoff + (radius * Math.sin(theta + (i * delta)));drawDot(row, col, (1.0 - i/10));
}}
![Page 9: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/9.jpg)
Spinny.js – Draw Dot.
ØWith HTML5 we see a true 2D API.ØDrawing contexts.ØPaths, arcs, fills & strokes.
4/12/17 Slide 9CSU CT 310, Web Development, ©Ross Beveridge
function drawDot(xpos, ypos, alpha) {contxt.beginPath();contxt.globalAlpha = alpha;contxt.arc(xpos, ypos, dotr, 0, 2 * Math.PI, false);contxt.fillStyle = '#ff3f04';contxt.fill();contxt.strokeStyle = '#000000';;contxt.lineWidth = 2;contxt.stroke();
}
![Page 10: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/10.jpg)
4/12/17 Slide 10
More on HTML5 Drawing
4/12/17 Slide 10CSU CT 310, Web Development, ©Ross Beveridge
![Page 11: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/11.jpg)
Change of Topic: Video
4/12/17 Slide 11CSU CT 310 Web Development ©Ross Beveridge & Jamie Ruiz
![Page 12: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/12.jpg)
4/12/17 Slide 12
Web Video – Ancient History
4/12/17 Slide 12CSU CT 310, Web Development, ©Ross Beveridge
May 2005Managing video formats was nightmarishly complex, often leading to Flash!
![Page 13: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/13.jpg)
4/12/17 Slide 13
HTML5 Video – Better!
4/12/17 Slide 13CSU CT 310, Web Development, ©Ross Beveridge
![Page 14: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/14.jpg)
Two Formats Emerging
ØWebmØUnencumbered by I.P. claims, henceØOpenSource CompatibleØBacked by Google
ØH2.64 (MPEG4)ØGood quality, well supported, but …ØUsers are expected to pay license/royalty
4/12/17 Slide 14CSU CT 310, Web Development, ©Ross Beveridge
![Page 15: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/15.jpg)
4/12/17 Slide 15
So, encode with both …
4/12/17 Slide 15CSU CT 310, Web Development, ©Ross Beveridge
![Page 16: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/16.jpg)
4/12/17 Slide 16
Plays on Firefox, Safari, …
4/12/17CSU CT 310, Web Development, ©Ross Beveridge
Slide 16
![Page 17: Lecture 23 - Colorado State Universityct310/yr2017sp/more_progress/pdfs/… · Lecture 23 HTML5 Drawing Canvas and Video * * Course logo spider web photograph from Morguefileopenstock](https://reader035.vdocument.in/reader035/viewer/2022070721/5ee24964ad6a402d666cd41b/html5/thumbnails/17.jpg)
4/12/17 Slide 17
The HTML (5) Code.
4/12/17 Slide 17CSU CT 310, Web Development, ©Ross Beveridge
Think about a list of options and then the browser moves down the list until it finds a suitable option.