Download as PDF, PPTX
![Gradients
var rainbox = ctx.createLinearGradient(0, 0, w, h),
colours = {
0: 'red',
0.167: 'orange',
0.333: 'yellow',
// etc
};
for (var key in colours) {
rainbow.addColorStop(key, colours[key]);
}
ctx.fillStyle = rainbox;
ctx.fillRect(0, 0, w, h);](https://image.slidesharecdn.com/html5-tutorial-110523061137-phpapp01/85/HTML5-tutorial-canvas-offfline-sockets-22-320.jpg)
![Pixel Pushing
var pixels = ctx.getImageData(0, 0, w, h),
len = pixels.data.length;
for (var i = 0; i < len; i += 4) {
var rgb = 'rgb(' + // ↵
[
pixels.data[i], // red
pixels.data[i+1], // green
pixels.data[i+2] // blue
].join(',') + ')';
}](https://image.slidesharecdn.com/html5-tutorial-110523061137-phpapp01/85/HTML5-tutorial-canvas-offfline-sockets-23-320.jpg)
![Gradients
var rainbox = ctx.createLinearGradient(0, 0, w, h),
colours = {
0: 'red',
0.167: 'orange',
0.333: 'yellow',
// etc
};
for (var key in colours) {
rainbow.addColorStop(key, colours[key]);
}
ctx.fillStyle = rainbox;
ctx.fillRect(0, 0, w, h);](https://image.slidesharecdn.com/html5-tutorial-110523061137-phpapp01/75/HTML5-tutorial-canvas-offfline-sockets-22-2048.jpg)
![Pixel Pushing
var pixels = ctx.getImageData(0, 0, w, h),
len = pixels.data.length;
for (var i = 0; i < len; i += 4) {
var rgb = 'rgb(' + // ↵
[
pixels.data[i], // red
pixels.data[i+1], // green
pixels.data[i+2] // blue
].join(',') + ')';
}](https://image.slidesharecdn.com/html5-tutorial-110523061137-phpapp01/75/HTML5-tutorial-canvas-offfline-sockets-23-2048.jpg)
Uploaded byRemy Sharp
HTML5 tutorial: canvas, offfline & sockets
This document provides an overview of HTML5 features including new HTML5 elements, offline capabilities through the App Cache, local storage options, multimedia additions like video and audio, cross-domain messaging, and the Canvas API. It discusses using these features across browsers through polyfills and shims, and emphasizes the importance of JavaScript knowledge for full HTML5 implementation. Web Sockets are introduced as enabling real-time two-way communication through a persistent connection.
More Related Content
Similar to HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
- 1. HTML5 Huh, What isit good for?
- 2. Remy Sharp @rem I wrote a book on it :)
- 3. It's more than ๏HTML ๏ Buzzword ๏ New HTML5 ๏ Simple elements doctype
- 4. JavaScript ๏Offline ๏App cache ๏WebStorage ๏WebSQL ๏IndexedDB ๏Multimedia ๏Video & Audio
- 5. ๏X-domain JavaScript messaging ๏CORS ๏File API ๏Drag & Drop ๏History API ๏Lots, lots more.
- 6.
- 7. When can I use"HTML5"?
- 12. Making it work in the"other" browser
- 13. Polyfills will/might save you Ashim that mimics a future API providing a fallback to older browsers http://goo.gl/0Z9eI
- 14.
- 15. Canvas Han Solo ofHTML5
- 16. Canvas SVG
- 17. ๏ It's notone is better than the other, they do different things ๏ Select canvas when it makes sense ๏ Don't assume interactive means canvas ๏ Check out raphaeljs.com
- 18. <!DOCTYPE html> <html lang="en"> <head> <metacharset="utf-8" /> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
- 19. 2D API ctx =canvas.getContext('2d')
- 21. ๏Gradients ๏Pixel manipulation ๏Paths ๏Shadows ๏Export todata url ๏State saving
- 22. Gradients var rainbox =ctx.createLinearGradient(0, 0, w, h), colours = { 0: 'red', 0.167: 'orange', 0.333: 'yellow', // etc }; for (var key in colours) { rainbow.addColorStop(key, colours[key]); } ctx.fillStyle = rainbox; ctx.fillRect(0, 0, w, h);
- 23. Pixel Pushing var pixels= ctx.getImageData(0, 0, w, h), len = pixels.data.length; for (var i = 0; i < len; i += 4) { var rgb = 'rgb(' + // ↵ [ pixels.data[i], // red pixels.data[i+1], // green pixels.data[i+2] // blue ].join(',') + ')'; }
- 24. Paths var pinsize =26, pinedge = pinsize * 0.1, centre = pinsize/2, radius = centre - pinedge, circle = Math.PI * 2; pinctx.beginPath(); pinctx.arc(centre, centre, // ↵ radius, 0, circle, true); pinctx.closePath(); pinctx.fill();
- 25. T ip Math.PI == 180°
- 26. T ip Math.PI *2 == 360°
- 27. T ip d *Math.PI / 180 == radian
- 28. Shadows pinctx.shadowBlur = 2; pinctx.shadowOffsetX= 2; pinctx.shadowOffsetY = 2; pinctx.shadowColor = 'rgba(0,0,0,.7)';
- 29.
- 30. T ip context.canvas All context contain back- reference to it's canvas
- 31. State Saving pinctx.fillStyle ='#fff'; pinctx.save(); pinctx.fillStyle = '#f00'; // do something pinctx.restore(); // now fillStyle is #fff
- 32.
- 33. Using a Manifest <!DOCTYPEhtml> <html manifest="my.appcache"> <body> <!-- my page --> </body> </html>
- 34.
- 35. The Manifest 1. Serveas text/manifest, by adding to mime.types: text/cache-manifest appcache
- 36. Firefox caching <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds” </IfModule>
- 37. The Manifest 2. Firstline must be: CACHE MANIFEST
- 38. The Manifest 3. Includingpage is implicitly included in the cache.
- 39. The Manifest 4. Twofuther namespaces: NETWORK & FALLBACK
- 40.
- 41. CACHE MANIFEST What to CACHE: app.js cache app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
- 42. CACHE MANIFEST CACHE: App cache app.js app.css requires all index.html resources are NETWORK: http://* accounted for. https://* FALLBACK: / offline.html
- 43. CACHE MANIFEST CACHE: app.js Requests for app.css files not found index.html in the cache, NETWORK: http://* are directed https://* to offline.html FALLBACK: (when offline). / offline.html
- 44.
- 45. The Manifest 5. Includesome versioning to cache bust your manifest # version 16
- 46.
- 47. Browser: I havea Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: serve Browser: only Server: 304 Not locally request manifest file Modified
- 48. When your appupdates applicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; } };
- 49. T ip Do offline last
- 50. Web Sockets Two wayreal-time comms http://www.flickr.com/photos/44442915@N00/4960579336
- 51. In a nutshell ๏Persistentconnection ๏Tiny chunks of data exchanged ๏Bi-directional & no origin rules
- 52. Some Uses ๏Chat /"hello world" ๏Streaming data like stock share prices ๏Multi-player game state ๏Google Wave remember? :)
- 53. Native or polyfilled IE6✓ :'(
- 54.
- 55. new WebSocket(url) http://dev.w3.org/html5/websockets/
- 56. ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
- 57.
- 58. var data =JSON.parse(event.data);
- 59.
- 60. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 61. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 62. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 63. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 64. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 65. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 66. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); };
- 67. var url ='ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('hello world'); }; conn.onmessage = function (event) { console.log(event.data); }; Let's play
- 68.