Kirjautuminen
Tehtävät
Kilpailu
Alkuerät ovat ohi.
Itse en tiennytkään, että HTML5:ssa voi piirtää Javascriptillä grafiikkaa. http://www.petke.info/mousemove2.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var mx=0; //Globaali muuttuja hiiren x-koordinaatille
var my=0;
function luemouseposition() {
window.onmousemove = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event; // IE-ism
mx=event.clientX;
my=event.clientY;
}
};
function drawShape(){
// Otetaan Canvas elementti, canvas tarkoittaa suomeksi kangasta. Se on HTML5:n ominaisuus,
// jolla voi piirtää grafiikkaa. Siis mycanvas on id:n tunnus HTML osassa
var canvas = document.getElementById('mycanvas');
canvas.height = window.innerHeight/2;
canvas.width = window.innerWidth/2;
maxx = canvas.width;
maxy = canvas.height;
xpix=maxx/4;
xpix=xpix.toString();
xpix=xpix + "px";
canvas.style.left = xpix; //siirretään canvasta selaimen ikkunan koon mukaan
ypix=maxy/4;
ypix=ypix.toString();
ypix=ypix + "px";
canvas.style.left = xpix;
canvas.style.top = ypix; // tällöin siis ikkunan koon muuttuessa canvas siirtyy
canvas.style.position = "absolute";
// Tarkistetaan tukeeko selain canvasta
if (canvas.getContext){
// Määritellään 2D grafiikka käyttöönotetuksi canvaksessa
var ctx = canvas.getContext('2d');
luemouseposition();
mx=mx-maxx/4;
my=my-maxy/4;
var x0=maxx/2;
var y0=maxy/2;
var rx=maxx/2;
var ry=maxy/2;
var x=x0+rx*Math.cos(0);
var y=y0+ry*Math.sin(0);
var xk=3*(mx+my)/(maxx+maxy); //xk kerroin määritellään hiiren
// koordinaiteilla ja sillä kerrotaan alempana loopissa kulmaa
// alfa laskettaessa x koordinaattia. Looppi tuottaisi xk:n
// arvolla yksi pelkän ympyrän, mutta nyt käyriä.
ctx.beginPath();
ctx.moveTo(x,y);
for (var alfa=0; alfa<=80*3.1415926535; alfa=alfa+0.1) {
x=x0+(rx*Math.cos(xk*alfa));
y=y0+(ry*Math.sin(alfa));
ctx.lineTo(x,y);
}
ctx.stroke();
} else {
alert('Selaimesi ei tue tätä sivua.');
}
}
</script>
</head>
<body onload="drawShape();" onmousemove="drawShape();">
Liikuta hiirtä kuvan päällä.
<canvas id="mycanvas"></canvas>
</body></html>
</body>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.