What is HTML5?
HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.The previous version of HTML came in 1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
What is Canvas?
A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
Create a Canvas Element
<canvas id="myCanvas" width="200" height="100"></canvas>
Live Demo
<!DOCTYPE HTML>
<html>
<head>
<script>
// animation globals
var t=0;
var frameInterval = 10; // in ms
var canvas = null; // canvas DOM object
var context = null; // canvas context
// ball globals
var ballRadius = 10;
// physics globals
var collisionDamper = 0.4;
var floorFriction = 0.005;
var mouseForceMultiplier = 4;
var restoreForce =0.02;
var mouseX = 99999;
var mouseY = 99999;
var balls = null;
function Ball(x,y,vx,vy,color) {
this.x=x;
this.y=y;
this.vx=vx;
this.vy=vy;
this.color=color;
this.origX = x;
this.origY = y;
}
function init() {
canvas=document.getElementById("myCanvas");
context=canvas.getContext("2d");
initStageObjects();
setInterval(updateStage, frameInterval);
}
function updateStage() {
t+=frameInterval;
clearCanvas();
updateStageObjects();
drawStageObjects();
}
function initStageObjects() {
balls = new Array();
var blue = "#3A5BCD";
var red="#EF2B36";
var yellow = "#FFC636";
var green="#02A817";
var oOffset = 67;
// S
balls.push(new Ball(173,63,0,0,blue));
balls.push(new Ball(158,53,0,0,blue));
balls.push(new Ball(143,52,0,0,blue));
balls.push(new Ball(130,53,0,0,blue));
balls.push(new Ball(117,58,0,0,blue));
balls.push(new Ball(110,70,0,0,blue));
balls.push(new Ball(113,82,0,0,blue));
balls.push(new Ball(125,87,0,0,blue));
balls.push(new Ball(143,90,0,0,blue));
balls.push(new Ball(159,90,0,0,blue));
balls.push(new Ball(170,99,0,0,blue));
balls.push(new Ball(170,115,0,0,blue));
balls.push(new Ball(160,128,0,0,blue));
balls.push(new Ball(145,128,0,0,blue));
balls.push(new Ball(160,128,0,0,blue));
balls.push(new Ball(130,128,0,0,blue));
balls.push(new Ball(110,128,0,0,blue));
//H
balls.push(new Ball(200,49,0,0,green));
balls.push(new Ball(200,50,0,0,green));
balls.push(new Ball(200,61,0,0,green));
balls.push(new Ball(200,73,0,0,green));
balls.push(new Ball(200,89,0,0,green));
balls.push(new Ball(200,105,0,0,green));
balls.push(new Ball(200,118,0,0,green));
balls.push(new Ball(200,128,0,0,green));
balls.push(new Ball(200,128,0,0,green));
balls.push(new Ball(220,90,0,0,green));
balls.push(new Ball(240,49,0,0,green));
balls.push(new Ball(240,50,0,0,green));
balls.push(new Ball(240,61,0,0,green));
balls.push(new Ball(240,73,0,0,green));
balls.push(new Ball(240,89,0,0,green));
balls.push(new Ball(240,105,0,0,green));
balls.push(new Ball(240,118,0,0,green));
balls.push(new Ball(240,128,0,0,green));
balls.push(new Ball(240,128,0,0,green));
// A
balls.push(new Ball(270,128,0,0,yellow));
balls.push(new Ball(270,110,0,0,yellow));
balls.push(new Ball(270,93,0,0,yellow));
balls.push(new Ball(270,75,0,0,yellow));
balls.push(new Ball(270,60,0,0,yellow));
balls.push(new Ball(280,50,0,0,yellow));
balls.push(new Ball(295,50,0,0,yellow));
balls.push(new Ball(312,63,0,0,yellow));
balls.push(new Ball(305,50,0,0,yellow));
balls.push(new Ball(315,80,0,0,yellow));
balls.push(new Ball(315,100,0,0,yellow));
balls.push(new Ball(315,115,0,0,yellow));
balls.push(new Ball(315,128,0,0,yellow));
balls.push(new Ball(285,100,0,0,yellow));
balls.push(new Ball(305,100,0,0,yellow));
// N
balls.push(new Ball(350,49,0,0,green));
balls.push(new Ball(350,50,0,0,green));
balls.push(new Ball(350,61,0,0,green));
balls.push(new Ball(350,73,0,0,green));
balls.push(new Ball(350,89,0,0,green));
balls.push(new Ball(350,105,0,0,green));
balls.push(new Ball(350,118,0,0,green));
balls.push(new Ball(350,128,0,0,green));
balls.push(new Ball(350,128,0,0,green));
balls.push(new Ball(360,48,0,0,green));
balls.push(new Ball(365,65,0,0,green));
balls.push(new Ball(370,83,0,0,green));
balls.push(new Ball(375,100,0,0,green));
balls.push(new Ball(380,115,0,0,green));
balls.push(new Ball(385,130,0,0,green));
balls.push(new Ball(400,49,0,0,green));
balls.push(new Ball(400,50,0,0,green));
balls.push(new Ball(400,61,0,0,green));
balls.push(new Ball(400,73,0,0,green));
balls.push(new Ball(400,89,0,0,green));
balls.push(new Ball(400,105,0,0,green));
balls.push(new Ball(400,118,0,0,green));
balls.push(new Ball(400,128,0,0,green));
balls.push(new Ball(393,135,0,0,green));
//u
balls.push(new Ball(430,128,0,0,yellow));
balls.push(new Ball(430,110,0,0,yellow));
balls.push(new Ball(430,93,0,0,yellow));
balls.push(new Ball(430,75,0,0,yellow));
balls.push(new Ball(430,60,0,0,yellow));
balls.push(new Ball(430,50,0,0,yellow));
balls.push(new Ball(430,50,0,0,yellow));
balls.push(new Ball(430,63,0,0,yellow));
balls.push(new Ball(470,65,0,0,yellow));
balls.push(new Ball(440,140,0,0,yellow));
balls.push(new Ball(460,140,0,0,yellow));
balls.push(new Ball(470,50,0,0,yellow));
balls.push(new Ball(470,80,0,0,yellow));
balls.push(new Ball(470,100,0,0,yellow));
balls.push(new Ball(470,115,0,0,yellow));
balls.push(new Ball(470,128,0,0,yellow));
balls.push(new Ball(470,100,0,0,yellow));
balls.push(new Ball(470,100,0,0,yellow));
// L
/*balls.push(new Ball(394,49,0,0,green));
balls.push(new Ball(381,50,0,0,green));
balls.push(new Ball(391,61,0,0,green));
balls.push(new Ball(390,73,0,0,green));
balls.push(new Ball(392,89,0,0,green));
balls.push(new Ball(390,105,0,0,green));
balls.push(new Ball(390,118,0,0,green));
balls.push(new Ball(388,128,0,0,green));
balls.push(new Ball(400,128,0,0,green));
// E
balls.push(new Ball(426,101,0,0,red));
balls.push(new Ball(436,98,0,0,red));
balls.push(new Ball(451,95,0,0,red));
balls.push(new Ball(449,83,0,0,red));
balls.push(new Ball(443,78,0,0,red));
balls.push(new Ball(430,77,0,0,red));
balls.push(new Ball(418,82,0,0,red));
balls.push(new Ball(414,93,0,0,red));
balls.push(new Ball(412,108,0,0,red));
balls.push(new Ball(420,120,0,0,red));
balls.push(new Ball(430,127,0,0,red));
balls.push(new Ball(442,130,0,0,red));
balls.push(new Ball(450,125,0,0,red));
*/
}
function drawStageObjects() {
for (var n=0; n<balls.length; n++) {
context.beginPath();
context.arc(balls[n].x,balls[n].y,ballRadius,
0,2*Math.PI,false);
context.fillStyle=balls[n].color;
context.fill();
}
}
function updateStageObjects() {
for (var n=0; n<balls.length; n++) {
// set ball position based on velocity
balls[n].y+=balls[n].vy;
balls[n].x+=balls[n].vx;
// restore forces
if (balls[n].x > balls[n].origX) {
balls[n].vx -= restoreForce;
}
else {
balls[n].vx += restoreForce;
}
if (balls[n].y > balls[n].origY) {
balls[n].vy -= restoreForce;
}
else {
balls[n].vy += restoreForce;
}
// mouse forces
var distX = balls[n].x - mouseX;
var distY = balls[n].y - mouseY;
var radius = Math.sqrt(Math.pow(distX,2) +
Math.pow(distY,2));
var totalDist = Math.abs(distX) + Math.abs(distY);
var forceX = (Math.abs(distX) / totalDist) *
(1/radius) * mouseForceMultiplier;
var forceY = (Math.abs(distY) / totalDist) *
(1/radius) * mouseForceMultiplier;
if (distX>0) { // mouse is left of ball
balls[n].vx += forceX;
}
else {
balls[n].vx -= forceX;
}
if (distY>0) { // mouse is on top of ball
balls[n].vy += forceY;
}
else {
balls[n].vy -= forceY;
}
// floor friction
if (balls[n].vx>0) {
balls[n].vx-=floorFriction;
}
else if (balls[n].vx<0) {
balls[n].vx+=floorFriction;
}
if (balls[n].vy>0) {
balls[n].vy-=floorFriction;
}
else if (balls[n].vy<0) {
balls[n].vy+=floorFriction;
}
// floor condition
if (balls[n].y > (canvas.height-ballRadius)) {
balls[n].y=canvas.height-ballRadius-2;
balls[n].vy*=-1;
balls[n].vy+=collisionDamper;
}
// ceiling condition
if (balls[n].y < (ballRadius)) {
balls[n].y=ballRadius+2;
balls[n].vy*=-1;
balls[n].vy-=collisionDamper;
}
// right wall condition
if (balls[n].x > (canvas.width-ballRadius)) {
balls[n].x=canvas.width-ballRadius-2;
balls[n].vx*=-1;
balls[n].vx+=collisionDamper;
}
// left wall condition
if (balls[n].x < (ballRadius)) {
balls[n].x=ballRadius+2;
balls[n].vx*=-1;
balls[n].vx-=collisionDamper;
}
}
}
function clearCanvas() {
context.clearRect(0,0,canvas.width, canvas.height);
}
function handleMouseMove(evt) {
mouseX = evt.clientX - canvas.offsetLeft;
mouseY = evt.clientY - canvas.offsetTop;
}
function handleMouseOut() {
mouseX = 99999;
mouseY = 99999;
}
</script>
</head>
<body onLoad="init()" >
<canvas id="myCanvas" width="578" height="200"
onmousemove="handleMouseMove(event)"
onmouseout="handleMouseOut()"
></canvas>
</body>
</html>
Out Put
0 comments:
Post a Comment