DIVE INTO HTML5

HTML5

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

E-Book:

DIVE INTO HTML5
BY
MARK PILGRIM

SITE: http://diveintohtml5.org/

Analog Clock in Canvas

Browser Supports:
IE 9+
FF 3.5+
Safari 3.2+
Chrome 10.0+
Opera 10.6+
Android Browser 2.1+

DEMO

Source:

<canvas id="jclock" height="125" width="125"> </canvas>
<script&glt;
$(window).load(function() { new jClock('[yourpath]/clock.png', $('#jclock').get(0));
})
</script&glt;

jClock.js

(function($) {

var jClock = window.jClock = function(clock, canvas, options) {

var ctx, img;

// Canvas isn't supported, abort
if(!(ctx = canvas.getContext('2d'))) return;

options = $.extend(true, {}, jClock.defaults, options);
img = new Image();
img.src = clock;

// Need to wait until after the image is loaded
img.onload = function() {
tick();
setInterval(tick, 1000);
};

// The ticker, draws the clock upon each tick
function tick() {
var now = new Date(),
sec = now.getSeconds(),
min = now.getMinutes(),
hour = now.getHours();
if(hour > 12) hour = hour % 12;

// do the clock
drawClock();

// do the second hand
if(options.secondHand === true) drawHand(sec * Math.PI/30, options.second);

// do the minute hand
drawHand((min + sec/60) * Math.PI/30, options.minute);

// do the hour hand
drawHand((hour + sec/3600 + min/60) * Math.PI/6, options.hour);
}

function drawClock() {
ctx.clearRect(0, 0, options.height, options.width);
ctx.drawImage(img, 0, 0, options.width, options.height);
ctx.save();
}

function drawHand(radians, opts) {
radians -= 90 * Math.PI/180; // fix orientation

ctx.save();
ctx.beginPath();
ctx.translate(options.height/2, options.width/2);

// Set hand styles
ctx.strokeStyle = opts.color;
ctx.lineWidth = opts.width;
ctx.globalAlpha = opts.alpha;
if (options.shadow === true) {
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 1;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
}

ctx.rotate(radians);
ctx.moveTo(opts.start, 0);
ctx.lineTo(opts.end, 0);
ctx.stroke();
ctx.restore();
}

};

// Default options
jClock.defaults = {
height: 125,
width: 125,
secondHand: true,
shadow: true,
second: {
color: '#f00',
width: 2,
start: -10,
end: 35,
alpha: 1
},
minute: {
color: '#fff',
width: 3,
start: -7,
end: 30,
alpha: 1
},
hour: {
color: '#fff',
width: 4,
start: -7,
end: 20,
alpha: 1
}
};

})(jQuery);

CANVAS Tag (HTML5) - Create your imagination

DEMO1:
Logo Create: "Canvas is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw gr..."

DEMO2:

CANVAS TAG CLOUD.

DEMO3:

Analog Clock

Drag and Drop in HTML 5

The Drag and Drop API is one of the most important parts of the HTML5 API specifications because more and more sites are using the drag and drop functionality. It talks about dragging an object in the site and dropping it anywhere. It further extends drag and drop for use between browsers and your computer which was impossible earlier (they stated security as the reason).

SOURCE:

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>Drag-n-Drop demo</title>
<style>
#mainText{color:red}
#section1, #section2, #section3 {float:left; width:165px; height:165px; padding:20px; margin:10px}
#section1 { background-color: #ff0000; }
#section2 { background-color: #00ff00; }
#section3 { background-color: #0000ff; }
#dragMe1, #dragMe2, #dragMe3 { width:100px; height:30px; padding:5px; margin:5px; }
</style>
<script type="text/javascript">
function dragStart(e) {
e.dataTransfer.effectAllowed='move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target,0,0);
return true;
}
function dragEnd(e) {
e.dataTransfer.clearData("Text");
return true
}
function dragEnter(e) {
var idelt = e.dataTransfer.getData("Text");
return true;
}
function dragOver(e) {
var articleID = e.dataTransfer.getData("Text");
var sectionId = e.target.getAttribute('id');
if( articleID=="dragMe3" || sectionId == "section1" || (sectionId == "section2" && articleID == "dragMe1") ||
(sectionId == "section3" && articleID == "dragMe2") )
return false;
else
return true;
}
function dragDrop(e) {
var idelt = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(idelt));
e.stopPropagation();
return false;
}

</script>
</head>
<body>
<h1>Drag-n-drop Demo</h1>
<article id="mainText"> Select a text from Red section and try dropping it to Green & Blue</article>
<section id="section1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<article id="dragMe1" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag to Green</article>
<article id="dragMe2" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag to Blue</article>
<article id="dragMe3" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag to Any</article>
</section>
<section id="section2" dropZone="f:image/png" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></section>
<section id="section3" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></section>
</body></html>

CANVAS Tag - Create your imagination

Canvas is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations.




CODE:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<canvas id ="cvs" width="500" height="500"/>

<script>
var ctx = document.getElementById("cvs").getContext("2d");

//function to convert deg to radian
function acDegToRad(deg)
{
return deg* (-(Math.PI / 180.0));
}

//set fill color to gray
ctx.fillStyle = "rgb(120,120,120)";
//save the current state with fillcolor
ctx.save();

//draw 2's base rectangle
ctx.fillRect(20,200,120,35);
//bring origin to 2's base
ctx.translate(20,200);
//rotate the canvas 35 deg anti-clockwise
ctx.rotate(acDegToRad(35));
//draw 2's slant rectangle
ctx.fillRect(0,0,100,35);
//restore the canvas to reset transforms
ctx.restore();
//set stroke color width and draw the 2's top semi circle
ctx.strokeStyle = "rgb(120,120,120)";
ctx.lineWidth = 35;
ctx.beginPath();
ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
ctx.stroke();

//reset canvas transforms
ctx.restore();

ctx.beginPath();
ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();

//change color to blue
ctx.fillStyle = "rgb(0,160,212)";
//save current state of canvas
ctx.save();
//draw long dividing rectangle
ctx.fillRect(162,20,8,300);
//draw player head circle
ctx.beginPath();
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
ctx.fill();

//start new path for tummy :)
ctx.beginPath();
ctx.moveTo(170,90);
ctx.lineTo(230,140);
ctx.lineTo(170,210);
ctx.fill();

//start new path for hand
//set lineCap and lineJoin to "round", blue color
//for stroke, and width of 25px
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.strokeStyle = "rgb(0,160,212)";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(222,150);
ctx.lineTo(230,190);
ctx.lineTo(270,220);
ctx.stroke();

//begin new path for drawing leg
ctx.beginPath();
ctx.moveTo(160,210);
ctx.lineTo(195,260);
ctx.lineTo(160,290);
ctx.stroke();

</script>

DEMO:

http://jsbin.com/exado5/11/edit