SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas

Weitere ähnliche Inhalte

Andere mochten auch

Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011LeslieOflahavan
 
งานนำเสนอ1
งานนำเสนอ1งานนำเสนอ1
งานนำเสนอ1wannis
 
Learning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperioLearning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperiojvielman
 
Wikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemWikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemLeslieOflahavan
 
WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?julia135
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideSharehkohort
 
Itec545slideshow
Itec545slideshowItec545slideshow
Itec545slideshowmrbayne
 
060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation Minerva060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation MinervaDov Winer
 
Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...Dov Winer
 
Styc Report
Styc ReportStyc Report
Styc Reportstyc
 
061019archives Oct06 Ch Digitisation Policy Xy
061019archives Oct06 Ch Digitisation Policy   Xy061019archives Oct06 Ch Digitisation Policy   Xy
061019archives Oct06 Ch Digitisation Policy XyDov Winer
 
Blue Rose Jf
Blue Rose JfBlue Rose Jf
Blue Rose Jfyangbqada
 

Andere mochten auch (20)

Reflections
ReflectionsReflections
Reflections
 
Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011
 
งานนำเสนอ1
งานนำเสนอ1งานนำเสนอ1
งานนำเสนอ1
 
Math presentation
Math presentationMath presentation
Math presentation
 
Learning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperioLearning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperio
 
Wikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemWikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use Them
 
WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?
 
Re Final
Re FinalRe Final
Re Final
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
 
EL ORIGEN DEL UNIVERSO
EL ORIGEN DEL UNIVERSOEL ORIGEN DEL UNIVERSO
EL ORIGEN DEL UNIVERSO
 
Itec545slideshow
Itec545slideshowItec545slideshow
Itec545slideshow
 
Epos Gilgamesh
Epos Gilgamesh Epos Gilgamesh
Epos Gilgamesh
 
060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation Minerva060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation Minerva
 
Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...
 
Styc Report
Styc ReportStyc Report
Styc Report
 
Extreme Time Management
Extreme Time ManagementExtreme Time Management
Extreme Time Management
 
LOS ASTRONOMOS-3
LOS ASTRONOMOS-3LOS ASTRONOMOS-3
LOS ASTRONOMOS-3
 
061019archives Oct06 Ch Digitisation Policy Xy
061019archives Oct06 Ch Digitisation Policy   Xy061019archives Oct06 Ch Digitisation Policy   Xy
061019archives Oct06 Ch Digitisation Policy Xy
 
Blue Rose Jf
Blue Rose JfBlue Rose Jf
Blue Rose Jf
 
Ramadan 2008
Ramadan 2008Ramadan 2008
Ramadan 2008
 

Mehr von Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone cameraRobin Hawkes
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLRobin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Robin Hawkes
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldRobin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTCRobin Hawkes
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLRobin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersRobin Hawkes
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSRobin Hawkes
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSRobin Hawkes
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeRobin Hawkes
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside RawketsRobin Hawkes
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationRobin Hawkes
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptRobin Hawkes
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
 

Mehr von Robin Hawkes (20)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
 

Kürzlich hochgeladen

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Kürzlich hochgeladen (19)

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

Hinweis der Redaktion

  1. - So, as you probably already know, I’m here to get you excited about HTML5 canvas.\n- Specifically, my job is to convince you to start playing with it today. Well, tomorrow…\n
  2. First, there are a couple of things you should be aware of…\n- I’ve made this talk as simple as possible, but there is still going to be some JavaScript involved. I can’t avoid that, I’m afraid! It’s nothing crazy though, as you’ll soon see.\n- Regardless, there are plenty of pretty pictures, so there’s something for the graphic designers in the room as well.\n- I promise you, canvas isn’t scary. :)\n
  3. - Reminisce briefly about how I started, at Redweb.\n
  4. \n
  5. - No plugins\n- Uses a JavaScript API\n
  6. \n
  7. \n
  8. - A bit like the old Microsoft Paint, but also nothing like it at the same time.\n- They’re both bitmap-based 2D drawing platforms.\n- It’s also been described by Christian Heilmann as an Etch-a-Sketch within the browser. I kinda like that comparison.\n- 3D will be achieved via WebGL.\n
  9. - SVG is another drawing platform that is available within the browser.\n- Canvas is bitmap, SVG is vector.\n- In canvas everything is drawn as a single flat image (ala. old MS Paint), which means you can’t edit something once it’s drawn; you’d have to erase it and draw it again (like an Etch-a-Sketch).\n- In SVG everything is drawn as a separate DOM element, which allows you to edit individual elements without affecting anything else.\n- SVG isn’t part of HTML5, but it is supported by most browsers.\n
  10. - Most modern browsers support canvas.\n- If you want to use it in IE8 and under you’ll need to include something like the ExplorerCanvas script in your page.\n- ExplorerCanvas is really cool and has been made by a bunch of crazy people at Google.\n- However, it’s not a perfect solution – you’ll experience performance issues and the like.\n- Fortunately IE9 beta supports canvas out of the box, and it’s seriously fast.\n
  11. \n
  12. \n
  13. * This is a 3D game, which is using tech not available in all browsers yet.\n
  14. \n
  15. http://weavesilk.com/\n
  16. http://rawkes.com/lab/google-balls-logo\n
  17. http://rawkets.com\n
  18. http://playbiolab.com/\n
  19. You can even use canvas to detect nudity. It’s pretty fucking cool!\n\nhttp://www.monocubed.com/lab/\nhttp://www.patrick-wied.at/static/nudejs/\nhttps://github.com/liuliu/ccv/tree/current/js/\n
  20. \n
  21. - Height and width need to be set in the element.\n- Using CSS will just scale the canvas and will not produce the effect you want.\n
  22. - The 2d rendering context is where everything is drawn.\n- The canvas element is actually a wrapper for the 2d rendering context, providing an API.\n- To be clear, you draw on to the 2d rendering context, not the canvas element.\n- You access the 2d rendering context through the canvas element.\n
  23. - The origin (0, 0) is at the top left\n- X moves positively right, and negatively left\n- Likewise, Y moves positively down and negatively left\n
  24. - First you must access the canvas element, this way uses pure JavaScript.\n- The 2D rendering context can then be accessed by calling the getContext method.\n
  25. - There is nothing to stop you using a library like jQuery to access the canvas element and the 2d rendering context.\n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. - There are a whole bunch of other things we haven’t covered, like text, shadows, line styles, saving the drawing state, and transformations (rotate, scale, translate).\n- You could write a book detailing every little thing that you can do in canvas. Which is pretty lucky, considering that’s exactly what I’ve done! I’ll leave the pimping till the end, though, I promise…\n
  33. - Technically pixel manipulation is part of the drawing features, but it deserve to be treated separately.\n- There is just too much cool stuff you can do with it.\n
  34. - Drawing an image on the canvas can be as simple of complex as you like\n- You can transpose an entire image element onto the canvas\n- Or you can crop out part of an image and place just that on the canvas\n- You can even resize the image when you place it on the canvas\n- The coolest thing is that you can use a video as the source image via the HTML5 video tag\n- When you use a video the current frame will be used as the source image\n
  35. - getImageData is definitely one of my favourite features of canvas. Possibly even my favourite feature overall!\n- It allows you to access the pixel data values of an image on the canvas, whether that is a basic image or a still from a HTML5 video.\n- The pixel data returned is in the format of an array.\n- On it’s own it’s nothing more than a gimmicky colour picker, but when used as part of something larger it starts to get cool.\n- One thing to note is that you can’t normally get the pixel data for images not on the same domain as the canvas.\n- This is to protect against all kinds of nasty things.\n- However, there are ways to get around it.\n
  36. - Canvas ambilight is an experiment designed to show off the integration between canvas and HTML5 video.\n- It utilises the drawImage and getImageData methods to grab a frame from the video every few seconds and average its colour values.\n- This in turn allows for a linear gradient to be drawn that matches those colours.\n- Add an image mask over the top of the canvas and you have yourself an impressive looking dynamic ambilight system.\n- Close pixelate works in a similar way to the ambilight example, in that it averages colour values in particular areas of the image, resulting in a pixelated effect.\n
  37. - We’ve had my favourite feature of canvas, now for my favourite use of canvas – animation.\n- Drawing shapes is great and all, but it’s when you start to move them that things get fun.\n- If you then make those moving shapes interact somehow then you’ve got yourself a pretty powerful system.\n
  38. - Thankfully it's not too complicated to construct an animation engine in canvas.\n- You just need a method of remembering what shapes are on the canvas and a way of redrawing them really quickly.\n
  39. - Drawable elements are stored as objects.\n- By treating these elements as JavaScript objects you can store and edit an unlimited amount of custom values; be that position, size, colour, weight, friction, anything!\n- All objects are stored in an array.\n- Run a timeout function every 33ms (roughly equal to 30fps).\n- Make any changes to the objects.\n- Clear the canvas.\n- Loop through and redraw every shape.\n- Simplified example, but it’s the gist of what happens.\n
  40. - There is much debate about wether HTML5 is going to be a Flash killer.\n- My opinion is to use the right tool for the right job. Stop comparing them.\n- Canvas does some stuff, Flash does others.\n- The missing piece for canvas to go mainstream is a GUI for developing canvas applications, but these are starting to appear, like the Radi app and Adobe integrating canvas support into the Flash editor.\n
  41. - Canvas has a bright future, it’s already being championed by companies like Microsoft, Apple, Opera, and Mozilla.\n- Easy integration with other HTML5 technologies is a killer feature. For example, WebSockets.\n- It’s already flexible and powerful, but we’re no where near witnessing it’s full potential.\n- Hardware acceleration.\n
  42. - Twitter @robhawkes\n- Rawkes (blog) http://rawkes.com\n- Book (pre-order on Amazon) http://www.amazon.co.uk/gp/product/1430232919/\n
  43. - Before I finish, I’d just like to thank Tom, Alex and the rest of the team for inviting me along and giving me the chance to speak to you guys. They’ve all put incredible amounts of time into organising this for you, the whole evening is going to be amazing.\n- I’d love to answer any questions that you might have, either about the talk, or canvas in general. So fire away!\n