46 votos

Cómo cambiar el tamaño de html del elemento canvas?

Tengo un lienzo elemento definido estáticamente en el html con una anchura y altura. Si intento usar JavaScript para cambiar el tamaño de forma dinámica (la configuración de una nueva anchura y altura - ya sea en los atributos de la lona o a través de las propiedades de estilo) me sale el siguiente error en Firefox:

uncaught exception: [Excepción... la "operación Ilegal en WrappedNative objeto prototipo" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" ubicación: "JS frame :: file:///home/russh/Desktop/test.html :: onclick :: línea 1" datos": no]

Es posible cambiar el tamaño de este elemento o tengo que destruirlo y crear un nuevo elemento sobre la marcha?

65voto

Eugene Lazutkin Puntos 22414

No publicar el código, y sospecho que haces algo mal. es posible cambiar el tamaño mediante la asignación de atributos de anchura y altura mediante el uso de números:

canvasNode.width  = 200; // in pixels
canvasNode.height = 100; // in pixels

Al menos a mí me funciona. Asegúrese de no asignar cadenas (por ejemplo, "2", "3", o "2.5" px), y no meterse con los estilos.

En realidad este es un públicamente disponible en el conocimiento que usted puede leer acerca de esto en el HTML canvas spec — es muy pequeño y excepcionalmente informativo. Este es el DOM de la interfaz:

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL();
  DOMString toDataURL(in DOMString type, [Variadic] in any args);

  DOMObject getContext(in DOMString contextId);
};

Como se puede ver que define los 2 atributos width y height, y dos de ellos son unsigned long.

21voto

Sam Hocevar Puntos 7554

Tenga en cuenta que si tu lienzo es estáticamente declarado debe utilizar el width y height atributos, no el estilo, por ejemplo. esto va a funcionar:

<canvas id="c" height="100" width="100" style="border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

Pero esto no trabajar:

<canvas id="c" style="width: 100px; height: 100px; border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

14voto

john Puntos 111

Yo sólo tenía el mismo problema que tú, pero encontró la toDataURL método, que resultó útil.

El quid de la cuestión es dar vuelta a su lienzo en un dataURL, cambiar su tamaño de lienzo y, a continuación, dibuje lo que había de nuevo en el lienzo de la dataURL guardó.

Así que aquí está mi código:

var oldCanvas = canvas.toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
img.onload = function (){
    canvas.height += 100;
    ctx.drawImage(img, 0, 0);
}

5voto

jignesh variya Puntos 197
<div id="canvasdiv" style="margin: 5px; height: 100%; width: 100%;">
    <canvas id="mycanvas" style="border: 1px solid red;"></canvas>
</div>
<script>
$(function(){
    InitContext();
});
function InitContext()
{
var $canvasDiv = $('#canvasdiv');

var canvas = document.getElementById("mycanvas");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();
}
</script>

4voto

Kent Brewster Puntos 1240

Esto funcionó para mí ahora mismo:

<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>
<script>
var c = document.getElementById('c');
alert(c.height + ' ' + c.width);
c.height = 200;
c.width = 200;
alert(c.height + ' ' + c.width);
</script>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X