HTML 5 - umu.se
Download
Report
Transcript HTML 5 - umu.se
HTML 5
En kort och ofullständig intro
HTML5 – var, hur, när
• HTML5 – implementeras succesivt
• Du behöver inte kasta eller göra om – allt det
gamla finns + vissa nyheter
• Det är lätt att komma igång med HTML5
– byt till <!DOCTYPE html>
• HTML5 fungerar redan – I exempelvis Firefox,
Safari, Chrome, Opera
• HTML5 kommer att leva länge
Bakåtblick
• HTML (4.01) publicerades 1998, och är en
buggfix av version 4.0 från 1997.
• Från W3C var tanken att HTML skulle ersättas
av XHTML.
• Syntaxen oförändrad sedan 1997.
Problem med XHTML
• XHTML 2 är inte bakåtkompatibelt
• XHTML 2 är svår att implementera i webbläsarna.
• XHTML 2.0 saknar funktionalitet för moderna
medier.
• Huvuddelen av webbplaterna i XTML har doctype
för HTML och i praktiken ingen äkta XML
• Underspecificerade - samma kod kan ge olika
resultat
Så långt har man kommit
• HTML5 är inte färdigt.
• HTML5 är bakåtkompatibelt
• HTML5 är inte färdigutvecklat förrän två
fullständiga implikationer gjorts.
Nya taggar
<article>-For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>-For content aside from the content it is placed in. The aside content should be related to the surrounding
content
<command>-A button, or a radiobutton, or a checkbox
<details>-For describing details about a document, or parts of a document
<summary>-A caption, or summary, inside the details element
<figure>-For grouping a section of stand-alone content, could be a video
<figcaption>-The caption of the figure section
<footer>-For a footer of a document or section, could include the name of the author, the date of the document,
contact information, or copyright information
<header>-For an introduction of a document or section, could include navigation
<hgroup>-For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the
others are sub-headings
<mark>-For text that should be highlighted
<meter>-For a measurement, used only if the maximum and minimum values are known
<nav>-For a section of navigation
<progress>-The state of a work in progress
<ruby>-For ruby annotation (Chinese notes or characters)
<rt>-For explanation of the ruby annotation
<rp>-What to show browsers that do not support the ruby element
<section>-For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>-For defining a time or a date, or both
<wbr>-Word break. For defining a line-break opportunity.
Media element
•
•
•
•
<audio>
<video>
<source>
<embed>
Canvas
<canvas>
Attribut
tel-The input value is of type telephone number
search-The input field is a search field
url-The input value is a URL
email-The input value is one or more email addresses
datetime-The input value is a date and/or time
date-The input value is a date
month-The input value is a month
week-The input value is a week
time-The input value is of type time
datetime-local-The input value is a local date/time
number-The input value is a number
range-The input value is a number in a given range
color-The input value is a hexadecimal color, like #FF8800
Matehatical Markup Language MathML
Scalable vector Graphics SVG
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>en röd och en blå cirkel<svg> <circle r="75"
cx="75" cy="75" fill="blue"/><circle r="50" cx="50"
cy="50" fill="red"/> </svg> </p>
</body>
</html>
Borttagna element
• Basefont, big, center, font, strike, tt, u
• Frame, frameset, noframes
• Acronym, applet, isindex, dir, noscript
Grundstruktur
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta charset=utf-8">
<title>Interesting things</title>
</head>
<body>
<p>Very nice text</p>
</body>
</html>
Det här går också bra
<!DOCTYPE HTML>
<meta charset=utf-8">
<title>Interesting things</title>
<p>Very nice text</p>
HTML4 – så gjorde man
<body>
<div id="header">
<div class="post">
<h2>Underrubrik</h2>
<p>aklösdfjas dasö asd dj d dlkajsd lj
klsda skdö öadk öalksd aökd öaks
döakls döasöldkf öaskd öas ödk aösd
</p>
<h1>Detta är rubriken</h1>
</div>
<div id="sidebar">
<h2>Meny</h2>
<ul>
<li><a href="">alt. 1</a></li>
…
<li><a href="">alt. 6</a></li>
</ul>
</div>
<div class="post">
<h2>Underrubrik</h2>
<p>aklösdfjas dasö asd dj d dlkajsd lj
löksa asödk aökd aks js alsj lkadj lasjd
l dklas dlfjkdh alskjd alsjd l</p>
</div>
</div>
<div id="footer">
<p><small>Copyright Nisse Pärlemor
och hans morsa och några andra jag
känner</small>
</p>
</div>
</body>
HTML4 – stylesheet
#sidebar {float:left;width:20%;}
.post {float:right;width:79%;}
#footer {clear: both}
HTML5
<!DOCTYPE HTML>
<body>
<header>
<h1>Detta är rubriken</h1>
</header>
<nav>
<h2>Meny</h2>
<ul>
<li><a href="">alt. 1</a></li>
…
<li><a href="">alt. 6</a></li>
</ul>
</nav>
<article>
<h2>Underrubrik</h2>
<p>aklösdfjas ….. dklas dlfjkdh alskjd alsjd
l</p>
</article>
<article>
<h2>Underrubrik</h2>
<p>aklösdfjas dasö asd dj d dlkajsd lj klsda
skdö öadk öalksd aökd öaks döakls
döasöldkf öaskd öas ödk aösd </p>
</article>
<footer>
<p><small>Copyright Nisse Pärlemor och
hans morsa och några andra jag
känner</small>
</p>
</footer>
</body>
header, nav, footer, article {display:block;}
nav {float:left;width:20%;}
article{float:right;width:79%;}
footer {clear: both}
header
<header>
<hgroup>
<a href=""><img src=map.jpg alt="karta"></a>
<h1>fantastiska platser att besöka</h1>
<h2>Ulan Bator, Peking och Skövde</h2>
</hgroup>
<nav>
<p>Är <a href="">Borås </a> eller <a href="">Alingsås </a>
eller <a href="">Trollhättan </a>ditt drömmål</p>
</nav>
</header>
Blogg
<article>
<header>
<h1>Tentamen kommer att ges den <time datetime=2011-06-01>1 juni</time></h1>
<p>Publicerad <time datetime=2011-03-30 pubdate> 30 mars</p>
</header>
<p>tag med fusklappar, mobiltelefoner och annat som kan underlätta …. </p>
<footer>Kursansvarig i samarbete med resten av lärarna</footer>
</article>
<article>
<header>
<h1><a href="">student</a> <time datetime=2011-04-02 pubdate>kommentar 2 april</p>
</header>
<p>Gillar detta - en slant till mutor skulle kanske också underlätta asd slkd lösd fölas ökdj d fökl ölkdfj
</p>
<footer>asdk alsd alsf alsdjf alskf lasdf alsd asdhj</footer>
</article>
header, nav, footer, article {display:block;}
nav {float:left;width:10%;}
article{float:right;width:89%;}
aside {clear:both}
footer {
clear: both;
color: #36F;
font-size: 12px;
}
VIDEO
• .ogg – Firefox, Opera,
Chrome
• MPEG4 – Chrome,
Safari
• WebM – Opera, Chrome
•
•
•
•
•
•
•
•
•
audio
autoplay
controls
height
loop
poster
preload
src
width
muted
autoplay
controls
pixels
loop
url
preload
url
pixels
ex_M_movie.html
•
•
•
•
•
<!DOCTYPE HTML>
<html>
<body>
<h1>Mina semesterbilder</h1>
<video src="Wildlife.ogg" width="500" height="340"
controls="controls">
• your browser does not support the video tag
• </video>
• </body>
• </html>
2011-01-22_1734
http://www2.tfe.umu.se/systemteknik/webbteknik/HTML/2011-0122_1734.swf
ex_M_audio.html
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
</script>
</head>
<body>
<audio src="Sleep Away.mp3" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>
Command
<!DOCTYPE HTML>
<html>
<link href="O_command.css" rel="stylesheet" type="text/css">
<body>
<menu>
<command onclick="alert('DU TORDES - GÖR INTE OM DET')">
Klicka Här - om du törs</command>
</menu>
</body>
</html>
Meter
• <!DOCTYPE HTML>
• <html>
• <link href="O_command.css" rel="stylesheet"
type="text/css">
• <body>
• <meter value="2" min="0" max="10">2 out of
10</meter><br />
• <meter value="0.6">60%</meter>
• </body>
• </html>
CANVAS
• <canvas> är ett nytt HTML-element som kan
användas för att rita grafik med hjälp av skript
(vanligtvis JavaScript). Det kan till exempel
användas för att rita grafer, göra foto
kompositioner eller göra enkla (och inte så
enkel) animeringar.
• Att använda <canvas>element är inte svårt
men du behöver en grundläggande förståelse
för HTML och JavaScript.
• <canvas> stöds inte i alla moderna
webbläsare, men stöds i Firefox, Chrome,
Opera 9 och Safari. Internet Explorer 9
kommer att ha stöd för den
<canvas id="tutorial" width="150"
height="150"></canvas>
• Det liknar <img> men saknar attributen src och alt.
• Elementet <canvas>har bara två attribut - bredd och
höjd.
• När ingen bredd och höjd attributen anges, kommer
ursprungligen arbetsytan 300 pixlar bred och 150 pixlar
hög.
• ID-attributet är inte specifika för elementet
<canvas>men är en av standard HTML-attribut som kan
användas med (nästan) alla HTML-element (som klass
till exempel).
• Det är alltid bra att lämna ett id eftersom detta gör det
mycket lättare att identifiera det i vårt skript.
Om läsaren inte stödjer Canvas
<canvas id="stockGraph" width="150" height="150">
Text som beskriver vad som finns i canvas
</canvas>
….
<canvas id="clock" width="150" height="150">
Bild som motsvarar det som finns i canvas
</canvas>
Om läsaren inte supportar Canvas
<body onload="draw()">
<canvas id="canvas" width="300" height="300">
HÄR BORDE FINNAS EN LUSTIG BILD MED 9 FIGURER
</canvas>
</body>
När canvas inte fungerar
Chrome
Internet Explorer 8
Exempel huvudsakligen från
https://developer.mozilla.org/en/can
vas_tutorial
Dokumentmall
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw()
{ var canvas = document.getElementById('tutorial');
if (canvas.getContext)
{ var ctx = canvas.getContext('2d'); } }
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Ett enkelt example
function draw()
{ var canvas = document.getElementById("canvas");
if (canvas.getContext)
{ var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
The grid
Rectangles
fillRect(x,y,width,height) : Draws a filled
rectangle
strokeRect(x,y,width,height) : Draws a
rectangular outline
clearRect(x,y,width,height) : Clears the specified
area and makes it fully transparent
(Det finns också ritmetoden clip() – men det
kommer vi tillbaka till längre fram)
function draw()
…
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50); } }
Drawing paths
beginPath()
closePath()
stroke()
fill()
• Första steg för att skapa en bana - beginPath
• Andra steget - rita.
• Tredje – closePath – sluta eller fylla
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}
moveTo
• moveTo(x, y)
• lineTo(x, y)
• arc(x, y, radius, startAngle, endAngle,
anticlockwise)
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);
ctx.stroke();
}
}
function draw(){
var canvas =
document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
ctx.beginPath();
var x
= 25+j*50;
var y
= 25+i*50;
var radius
= 20;
var startAngle = 0;
var endAngle
= Math.PI+(Math.PI*j)/2;
var anticlockwise = i%2==0 ? false : true;
ctx.arc(x,y,radius,startAngle,endAngle,
anticlockwise);
if (i>1)
{ ctx.fill(); }
else
{ ctx.stroke();
}
}
}
}
}
Bezier and quadratic curves
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Cp1x och cp1y är koordinater
Till röda punkten
X och y är koordinater till
Kurvans slutpunkt
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
}
}
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
}
}
Rectangles
rect(x, y, width, height)
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.rect(25, 25, 25, 25)
ctx.fill();
}
}
drawImage(image, x, y, width, height)
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'Image.png';
}
drawImage(image, x, y, width, height)
function draw() {
var ctx =
document.getElementById('canvas').
getContext('2d');
var img = new Image();
img.onload = function(){
for (var i=0;i<4;i++){
for (var j=0;j<3;j++){
ctx.drawImage(img,j*50,i*38,50,38);
}
}
}
img.src = 'seal.png';
}
• drawImage(image, sx, sy, sWidth, sHeight, dx,
dy, dWidth, dHeight)
save() restore()
• Metoderna save and restore används för att spara och
hämta tillstånd
• Ingen av metoderna har några parametrar.
• Tillstånden lagras på en stack – vid save läggs
tillståndet på stacken
• Värdena för strokeStyle, fillStyle, globalAlpha,
lineWidth, lineCap, lineJoin, miterLimit,
shadowOffsetX, shadowOffsetY, shadowBlur,
shadowColor, globalCompositeOperation sparas.
• Save kan användas hur många gånger som helst.
• Vid resotore läses från stacken.
Save restore
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,150,150);
ctx.save();
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120);
ctx.save();
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.restore();
ctx.fillRect(45,45,60,60);
ctx.restore();
ctx.fillRect(60,60,30,30);
}
Translate(x, y)
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,300,300);
for (var i=0;i<3;i++) {
for (var j=0;j<3;j++) {
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50+j*100,50+i*100);
drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
ctx.restore();
}
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O; var y1 = 0; var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
rotate(angle)
• Den andra metoden för transformering är
rotera.
• Vi använder den för att rotera arbetsytan runt
det aktuella origo.
• Metoden har bara en parameter och vinkeln
arbetsytan roteras genom.
• Rotationenscentrumär alltid arbetsytans
origo.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);
for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (var j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
}
scale(x, y)
• Nästa transformations metod är “scaling”.
• Metoden har två parametrar x som är
skalfaktorn I horisontell led och y som är
skalfaktorn vertikalt
• Båda parametrarna är rationella tal
• Värden under 1 reducerar skalan och värde
större än 1 ökar skalan.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);
// Non-uniform scaling (y direction)
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
// Uniform scaling
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5); // no scaling
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
// Non-uniform scaling (x direction)
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
globalCompositeOperation
Composite
var compositeTypes = [
'source-over','source-in','sourceout','source-atop', 'destinationover','destination-in','destinationout','destination-atop',
'lighter','darker','copy','xor’
];
// draw rectangle
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);
function draw(){
for (i=0;i<compositeTypes.length;i++){
var label =
Document.createTextNode(compositeTy
pes[i]);
document.getElementById('lab'+i).appen
dChild(label); var ctx =
document.getElementById('tut'+i).getCo
ntext('2d');
// draw circle
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
// set composite property
ctx.globalCompositeOperation =
compositeTypes[i];
Clipping paths
• Maskar bort delar av en bild
• Det finns tre metoder
– Stroke
– Fill
– Clip
function draw() {
var ctx =
document.getElementById('canvas').getContext('2d')
;
ctx.fillRect(0,0,150,150);
ctx.translate(75,75);
// Create a circular clipping path
ctx.beginPath();
ctx.arc(0,0,60,0,Math.PI*2,true);
ctx.clip();
// draw background
var lingrad = ctx.createLinearGradient(0,-75,0,75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
ctx.fillStyle = lingrad;
ctx.fillRect(-75,-75,150,150);
// draw stars
for (var j=1;j<50;j++){
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75-Math.floor(Math.random()*150),
75-Math.floor(Math.random()*150));
drawStar(ctx,Math.floor(Math.random()*4)+2);
ctx.restore();
} }
function drawStar(ctx,r){
ctx.save();
ctx.beginPath()
ctx.moveTo(r,0);
for (var i=0;i<9;i++){
ctx.rotate(Math.PI/5);
if(i%2 == 0) {
ctx.lineTo((r/0.525731)*0.200811,0);
} else {
ctx.lineTo(r,0);
} }
ctx.closePath();
ctx.fill();
ctx.restore();
}
Animation
Clear Save Draw Restore
setInterval(animateShape,100); - upprepning varje 100 ms
setTimeout(animateShape,500); - en gång efter 500 ms
Tredje varianten är att styra animationen med mus eller
tangentbord.
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
sun.src = 'images/sun.png';
moon.src = 'images/moon.png';
earth.src = 'images/earth.png';
setInterval(draw,100);
}
function draw() {
var ctx =
document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,300,300);
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
((2*Math.PI)/60000)*time.getMilliseconds() );
ctx.translate(105,0);
ctx.fillRect(0,-12,50,24);
ctx.drawImage(earth,-12,-12);
ctx.save();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() +
((2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(moon,-3.5,-3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false);
ctx.stroke();
ctx.drawImage(sun,0,0,300,300);
}
•
•
•
•
•
•
•
•
Gartic - http://www.gartic.net/
Multi-player drawing game
Canvascape - http://www.benjoffe.com/code/demos/canvascape/
A 3D adventure game (first-person shooter).
Freeciv.net
A multiplayer strategy game with isometric graphics, created using HTML5 canvas.
A Basic RayCaster https://developer.mozilla.org/en/A_Basic_RayCaster
A good example of how to do animations using keyboard controls.
canvas adventure
Also a nice example that uses keyboard controls.
An interactive Blob http://www.blobsallad.se
Have fun with the blob.
Flying through a starfield http://arapehlivanian.com/wpcontent/uploads/2007/02/canvas.html
Fly through stars, circles or squares.
iGrapher
An example of charting stock market data.
http://dev.w3.org/html5/2dcontext/