javascript - getcontext - html code

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

Question

Tengo un elemento canvas definido estáticamente en html con ancho y alto. Si intento usar JavaScript para redimensionarlo dinámicamente (estableciendo un nuevo ancho y alto, ya sea en los atributos del lienzo o mediante las propiedades de estilo), aparece el siguiente error en Firefox:

excepción no detectada: [Excepción ... "Operación ilegal en el objeto prototipo WrappedNative" 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?

Answer 1

Aquí está mi esfuerzo por dar una respuesta más completa (basándose en la respuesta de @John).

El problema inicial que encontré fue cambiar el ancho y alto de un nodo de lienzo (usando estilos), como resultado, el contenido se "amplió" o "disminuyó". Este no fue el efecto deseado.

Por lo tanto, supongamos que desea dibujar dos rectángulos de tamaño arbitrario en un lienzo de 100 px por 100 px.

<canvas width="100" height="100"></canvas>

Para asegurarse de que los rectángulos no excedan el tamaño del lienzo y, por lo tanto, no sean visibles, debe asegurarse de que el lienzo sea lo suficientemente grande.

var $canvas = $(''canvas''),
    oldCanvas,
    context = $canvas[0].getContext(''2d'');

function drawRects(x, y, width, height)
{
  if (($canvas.width() < x+width) || $canvas.height() < y+height)
  {
    oldCanvas = $canvas[0].toDataURL("image/png")
    $canvas[0].width = x+width;
    $canvas[0].height = y+height;

    var img = new Image();
    img.src = oldCanvas;
    img.onload = function (){
      context.drawImage(img, 0, 0);
    };
  }
  context.strokeRect(x, y, width, height);
}


drawRects(5,5, 10, 10);
drawRects(15,15, 20, 20);
drawRects(35,35, 40, 40);
drawRects(75, 75, 80, 80);

Finalmente, aquí está el jsfiddle para esto: http://jsfiddle.net/Rka6D/4/ .

Answer 2

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>

Answer 3

Los prototipos pueden ser una molestia para trabajar y, a partir de la parte _PROTO del error, su error es causado por, digamos, HTMLCanvasElement.prototype.width , posiblemente como un intento de cambiar el tamaño de todos los lienzos a la vez.

Como sugerencia, si intenta cambiar el tamaño de varios lienzos a la vez, puede intentar:

<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<script type="text/javascript">
    ...
</script>

En JavaScript, en lugar de invocar un prototipo, intente esto:

$$ = function(){
    return document.querySelectorAll.apply(document,arguments);
}
for(var i in $$(''canvas'')){
    canvas = $$(''canvas'')[i];
    canvas.width = canvas.width+100;
    canvas.height = canvas.height+100;
}

Esto redimensionaría todos los lienzos al agregar 100 px a su tamaño, como se demuestra en este ejemplo

Espero que esto haya ayudado.

Answer 4

No publicaste tu código, y sospecho que haces algo mal. es posible cambiar el tamaño asignando atributos de ancho y alto usando números:

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

Al menos funciona para mí. Asegúrese de no asignar cadenas (por ejemplo, "2cm", "3in", o "2.5px"), y no se meta con los estilos.

En realidad, este es un conocimiento de dominio público, puede leerlo todo en el lienzo HTML , es muy pequeño e inusualmente informativo. Esta es toda la interfaz DOM:

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 puede ver, define 2 atributos de width y height , y ambos son unsigned long .

Answer 5

Tenga en cuenta que si su lienzo está declarado estáticamente debe usar los atributos de width y height , no el estilo, por ej. esto funcionará:

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

Pero esto no funcionará:

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

Answer 6

Tuve el mismo problema que tú, pero descubrí el método toDataURL, que resultó útil.

La esencia de esto es convertir tu lienzo actual en una URL de datos, cambiar el tamaño de tu lienzo y luego dibujar lo que tenías en tu lienzo desde la URL de datos que guardaste.

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);
}

Answer 7

<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>