HTML and CSS Reference
In-Depth Information
benutzte Füllfarbe dynamisch innerhalb der
for
-Schleife fest und erzeugen so pro
Durchgang einen unterschiedlichen Grauwert. Im nächsten Schritt wird ein Quadrat mit
den Maßen 30 x 30 an dynamischer x-Position (je nach Durchgang also 0, 30, 60, 90
etc.) und an statischer y-Position 60 gezeichnet. Der Ursprung für alle Operationen ist
dabei immer die obere linke Ecke des Canvas.
ctx.fillStyle "rgb("+color+","+color+","+color+")";
ctx.fillRect (i*30, 60, 30, 30);
Da wir mit der Füllfarbe
rgb(0,0,0)
beginnen und bei
rgb(255,255,255)
enden,
werden durch die zehn Durchgänge der Schleife zehn Quadrate in unterschiedlichen
Graustufen aneinandergereiht. Unter Zuhilfenahme des CSS-Frameworks iWebKit
können Sie mit leicht modifiziertem Code das Beispiel wie folgt für ein iPhone oder
Android-Telefon umsetzen:
<!
Einfache Canvas Demo mit iWebKit 5
Sven Haiges / Markus Spiering
>
<!DOCTYPE>
<html>
<head>
<title>Mobile Canvas</title>
<meta content "minimum scale 1.0, width device width, maximum
scale 0.6667, user scalable no" name "viewport" />
<meta name "layout" content "webkit" />
<link href "style.css" rel "stylesheet" media "screen" type "text/css" />
<script>
function init()
{
var canvas document.getElementById('myCanvas');
var ctx canvas.getContext('2d');
for (var i 0; i < 10; i++)
{
var color Math.round((i/9) * 255);
ctx.fillStyle "rgb("+color+","+color+","+color+")";
ctx.fillRect (i*28, 61, 28, 28);
}
// Funktioniert auf dem iPhone ab 3.1
var dataURL canvas.toDataURL();
var img document.createElement('img');
img.setAttribute('src',dataURL);
document.getElementById('box').appendChild(img);
// Funktioniert in FF, bislang aber noch nicht auf
iPhone/Android 2.2
var imageData ctx.getImageData(0,0,280,150);
document.getElementById('message').innerHTML data.width + '/'
+ data.height;
}
document.addEventListener("DOMContentLoaded", init, false);
