Redimensionner l'élément HTML5 canvas

Comment puis-je les obtenir, de sorte que l'élément HTML5 canvas ist redimensionnables?

Je tiens à mettre en œuvre cet élément de sorte que vous pouvez mettre à l'échelle de toute taille. Le cas de la mise à l'échelle doit être la souris, qui aligne le bord et l'utilisateur redimensionne l'élément.

J'ai déjà lu sur la façon dont vous pouvez obtenir sur un objet dans le canevas de l'élément. Mais dans mon cas, j'ai besoin de cette sur la toile élément lui-même (<canvas>).

Cela peut être un doublon: stackoverflow.com/questions/331052/...
jetez un oeil à mon application: stackoverflow.com/a/23128583/1265753

OriginalL'auteur shub | 2012-01-01

  1. 10

    Définition d'une toile de largeur ou de la hauteur des propriétés a pour effet de nettoyer la toile. Même canvas.width = canvas.width; vous fera perdre tout dans la toile. Parfois, cela est souhaitable, mais dans votre cas, il n'est probablement pas.

    Ce que vous aurez probablement besoin de faire est quelque chose comme cela

     var myCanvas = document.getElementById('myCanvas');
 var tempCanvas = document.createElement('canvas');
 tempCanvas.width = myCanvas.width;
 tempCanvas.height = myCanvas.height;

 //save your canvas into temp canvas
 tempCanvas.getContext('2d').drawImage(myCanvas, 0, 0);

 //resize my canvas as needed, probably in response to mouse events
 myCanvas.width = newWidth;
 myCanvas.height = newHeight;

 //draw temp canvas back into myCanvas, scaled as needed
 myCanvas.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, myCanvas.width, myCanvas.height);

    Dans la plupart des navigateurs, la mise à l'échelle peut se faire avec un bicubique mise à l'échelle de l'algorithme, à l'origine pour obtenir floue. Dans certains cas, vous pouvez définir une propriété CSS à cause du voisin le plus proche sur la toile si vous le souhaitez, mais l'appui de navigateur est très inégale droit maintenant. Vous pouvez à la place faire manuellement un voisin le plus proche de l'échelle , du fait que cette question montre: Comment étirer les images sans antialiasing

    Alternative CSS Approche

    Une autre approche à l'échelle de la toile à l'aide de CSS. Dans google Chrome/Safari/IE, tu peux faire:

    <canvas style="zoom:200%" />

    Dans Firefox, vous pouvez utiliser une transformation d'échelle pour obtenir le même effet:

    <canvas style="-moz-transform:scale(2)" />

    Dans de nombreux égards, cette approche est plus facile, mais il est livré avec son propre petit de pièges et de navigateur bizarreries.

    OriginalL'auteur Matt Greer

  2. 1

    Je pense que vous avez besoin de lier l'événement onresize à votre corps de document.

    Puis à l'intérieur de l'événement que vous avez besoin de redimensionner la zone de travail à l'aide de la fenêtre.innerWidth et de la fenêtre.innerHeight.

    Ont un look @ http://kile.stravaganza.org/lab/js/canvas_resize/ (voir la source)

    OriginalL'auteur Stephen Gennard

  3. 0

    Bien que c'est un peu tard pour répondre à cette question, j'aimerais partager ce que j'ai trouvé pour résoudre la même question. Prendre un coup d'oeil s'il vous plaît.

    panneau.css 

    #Panel {
width:  100%;
height: 30%;
}

    app.js

    var widthG = 0, height=G = 0;
function updateScale() {
    widthG  = parseInt($('#Panel').width());
    heightG = parseInt($('#anel').height());
}
...

function updateCanvas() {
    ctx = $('#canvas').get(0).getContext('2d');
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    ctx.canvas.width = widthG;
    ctx.canvas.width = heightG;
}

    J'ai aussi essayé de ré-attribuer ces propriétés par la syntaxe css, mais ça ne fonctionne pas.

    $('#canvas').width(panelW);
$('#canvas').height(panelH);

    Espère que cette aide ppl a souffert de la même question.

    OriginalL'auteur Jog Dan