Ciao a tutti
stavo realizzando una griglia utilizzando l'elemento canvas!!
premetto che sto studiando l'html5 e che quindi posso anche aver sbagliato cose basilari
il punto è che mi funziona con google chrome ma (ad esempio) non con firefox!! Perchè???
allego il link sperando che qualcuno mi sappia dare una mano!!!
http://www.alexinfantini.com/prova/prova2.html
e questo è il codice:
aprite il file con google chrome e vedete come dovrebbe essere -.-'codice:<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>prova</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <style type="text/css"> body { background: #000; margin: 0px; padding: 0px; overflow:hidden; } canvas { background: #fff; } </style> <script type="text/javascript">//<![CDATA[ $(window).load(function(){ //grid width and height var bw = document.width; var bh = document.height; //padding around grid var p = 0; //size of canvas var cw = document.width; var ch = document.height; var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body'); var context = canvas.get(0).getContext("2d"); function drawBoard(){ for (var x = 0; x <= bw; x += 85) { context.moveTo(0.5 + x + p, p); context.lineTo(0.5 + x + p, bh + p); } for (var x = 0; x <= bh; x += 85) { context.moveTo(p, 0.5 + x + p); context.lineTo(bw + p, 0.5 + x + p); } context.strokeStyle = "black"; context.stroke(); } drawBoard(); });//]]> $(document).ready(function() { $('<canvas>').hover( function() { $(this).animate({opacity: "0.25"}, 500 ); }, function() { $(this).delay(200).animate({opacity: "0.01"}, 500 ); }); }); </script> </head> <body> </body> </html>
grazie anticipatamente
Rispondi quotando
