![Canvas
scriptable rendering of 2D shapes and bitmap
images[wikipedia] .But webGL
<canvas id="example" width="200" height="200">Canvas not supported</canvas>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
</script>](https://image.slidesharecdn.com/html5-171108125413/85/HTML5-5-320.jpg)
![SVG
XML-based vector image format for two-dimensional graphics
[wikipedia]
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>](https://image.slidesharecdn.com/html5-171108125413/85/HTML5-6-320.jpg)
![Video
video element for the purpose of playing videos[wikipedia]
<video poster="poster.png" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>Video not supported</p>
</video>](https://image.slidesharecdn.com/html5-171108125413/85/HTML5-7-320.jpg)
HTML5 تکنولوژی های موجود در
- 4. Canvas ● Canvas ● SVG ● Video ● Audio ● Websocket,sse ● Web Storage ● Geolocation ● Webgl ● Webrtc ● …
- 5. Canvas scriptable rendering of 2D shapes and bitmap images[wikipedia] .But webGL <canvas id="example" width="200" height="200">Canvas not supported</canvas> <script> var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = 'red'; context.fillRect(30, 30, 50, 50); </script>
- 6. SVG XML-based vector image format for two-dimensional graphics [wikipedia] <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" /> <circle cx="125" cy="125" r="75" fill="orange" /> <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" /> <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /> </svg>
- 7. Video video element for the purpose of playing videos[wikipedia] <video poster="poster.png" controls> <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> <p>Video not supported</p> </video>
- 8. Audio Audio element for the purpose of playing Audios <audio controls> <source src="horse.mp4" type='audio/mp4' /> <source src="horse.oga" type='audio/ogg; codecs=vorbis' /> <p>Audio not supported</p> </audio>
- 10. Web storage ● sessionStorage sessionStorage.setItem('key', 'value'); sessionStorage.getItem('key'); ● localStorage localStorage.setItem('key', 'value'); localStorage.getItem('key'); 5M,10M >> 4K cookie
- 11. Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,function(){alert("Error");}); } else { alert( "Geolocation not supported"); } function showPosition(position) { var x = "Latitude: " + position.coords.latitude + ",Longitude: " + position.coords.longitude; alert(x); }
- 12. webgl
- 13. WebRTC
- 14. Others ● MathML ● Web Forms2 ● WebSql ● IndexedDatabase ● New Semantic elements ● Drag & drop ● Web Messaging ● Microdata ● ...
- 15. ?