10. Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
For Mobile :
audio-sprites
11. Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
12. Canvas
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
<h1>Canvas is NOT supported in your browser</h1>
</canvas>
<script>
var ourCanvas=document.getElementById("myCanvas");
var ourContext=ourCanvas.getContext("2d");
ourContext.fillStyle="#FF0000";
ourContext.fillRect(0,0,150,75);
</script>
14. Canvas
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").
getContext("2d");
var img = new Image();
img.src = "ourImage.png";
canvasContext.drawImage(img,100,100,200,200);
canvasContext.drawImage(img,0,0,200,200,100,100,50,50);
</script>
15. Canvas
var TO_RADIANS = Math.PI/180; //here we rotate an image
function drawRotatedImage(image, x, y,width,height,angle)
{
// save the current co-ordinate system before we screw with
it
context.save();
// move to the middle of where we want to draw our image
context.translate(x, y);
// rotate, converting our angle from degrees to radians
context.rotate(angle * TO_RADIANS);
// draw it up and to the left by half the width and height of
the image
//context.drawImage(image, -(image.width/2), -(image.
height/2));
// and restore the co-ords to how they were when we began
context.restore();
}
16. Canvas
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
