No puede dibujar en el canvas de HTML5 con jQuery

El siguiente código no carga el rectángulo verde en el lienzo. Esta es mi primera vez tratando de salir de jQuery (ya se que es una mierda o me chupa), ¿por qué una cosa tan simple no funciona, estoy desconcertado. Mi navegador es Firefox 3.6. Jugando con jQuery porque no hay otra jQuery impulsado por un pedazo de código que puede ser muy útil…

<html>
<head>
<style type="text/css">
 #canvas {
 border:1px solid black;
 }
</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
<script type="text/javascript">
//have also tried
<script type="application/javascript">

  $(function() {
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");

 //ctx.clearRect(0,0,300,300);
 ctx.fillStyle = "green";
 ctx.fillRect(0,0,50,50);

 });

</script> 
</head>

<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
  • Trate de envolver el código en un viejo y simple función anónima? jQuery no es realmente mucho uso con <canvas>
  • En el futuro, no uso &lt; y <pre> para mostrar el código. Sólo una sangría de todos por 4 espacios y será en un bloque de código y sintaxis resaltada demasiado
InformationsquelleAutor Don Don | 2010-07-22

6 Kommentare

  1. 4

    Obtener el elemento canvas mediante el uso de jQuery no funciona. Usted no puede usar el método getContext() en el objeto jQuery. En lugar de:

    var canvas = $("#canvas");

    Debe usar (si «dibujar» era el ID del elemento canvas):

    var canvas = document.getElementById('draw');

    • Para obtener el nativo elemento DOM también se puede escribir: var canvas = $("#canvas")[0]; o var canvas = $("#canvas").get(0);
  2. 2

    Intente esto:

    <script type="application/javascript">
        $(document).ready(function() {
            var canvas = $("#canvas")[0];
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
    
                //Choose a color
                ctx.fillStyle = color;
                ctx.strokeStyle = color;
                ctx.fillRect(0, 0, 50, 50);
            } else {
                //Browser doesn't support CANVAS
            }
        });
    </script>

    Que debería funcionar como se esperaba. Tengo la sospecha de que estaban perdiendo el $(document).listo() poco.

    • No. todavía lienzo en blanco. He añadido alert(‘poblem’); para el bloque else Es mi copia de FF o hackeado mi ordenador hackeado?
    • Cómo probar si jquery está realmente funcionando correctamente? tks.
    • Funciona con Chrome 5.0. Pero jquery es tan condenadamente exigente? El siguiente código no funciona con firebug lite en chrome tú quejó indefinido $(document).keydown(function(e) { // console.log(e.el código de la tecla); alert(e.el código de la tecla); })
  3. 1

    No No,

    Que usted necesita para hacer un par de pequeños cambios.

    Quitar primero el [0] a partir de esta línea,

    var canvas = $("#canvas")[0]

    Segundo, asumir que [0] y agregar a la declaración de si,

    if (canvas[0].getContext) {

    Y agregar a la asignación de ctx

    var ctx = canvas[0].getContext("2d");

    Alternativamente asignar a una variable antes de la prueba para él.

    var canvas = $("#canvas"), ctx = canvas[0].getContext("2d");
    if (ctx) {

    Y usted debe ser bueno para ir…

  4. 0

    Debe cerrar el lienzo de la etiqueta y como Nick ya se dijo, que sin duda debe utilizar el jQuery $(document).listo() función:

    <html>
    <head>
    <style type="text/css">
        #canvas {
            border:1px solid black;
        }
    </style>
    
    <script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var canvas = $("#canvas")[0];
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
    
                //Choose a color
                ctx.fillStyle = "#000000";
                ctx.strokeStyle = "#000000";
                ctx.fillRect(0, 0, 50, 50);
            } else {
                //Browser doesn't support CANVAS
            }
        });
    </script>
    </head>
    
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
    </body>
    </html>
  5. 0
       $(document).ready(function() {
                    var ctx = $("#canvas")[0].getContext("2d");
                    //Choose a color
                    ctx.fillStyle = "#00ff00";
                    ctx.strokeStyle = "#ff0000";
                    ctx.fillRect(10, 10, 200, 200);
    
            });
    • Explicar la solución. No acaba de publicar el código.
  6. 0

    OK, yo duplicar el problema en IE y resolverlo.
    La razón es la etiqueta de secuencia de comandos debe utilizar el cierre explícito de la etiqueta.
    Por lo tanto, cambiar

    <script type="text/javascript" src="/js/jquery-1.4.2.min.js" />

    a:

    <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

    (navegador no entender <script … />)

    hay otra sintaxis problema es el elemento canvas no tiene cierre de la etiqueta, pero el navegador (IE) parece entenderlo. No estoy seguro FF

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein