Redimensionner dynamiquement la fenêtre de toile avec javascript / jquery?

Comment redimensionner une toile avec javascript/jquery?

Redimensionnement à l'aide de la fonction css et en l'appliquant à l'élément canvas juste s'étend le contenu comme si vous étiez l'étirement de l'image.

Comment pourrais-je aller sur le faire sans l'étirement?

http://jsfiddle.net/re8KU/4/

source d'informationauteur maxhud

  1. 21

    Faire une fonction qui fait le dessin, puis re-dessiner à chaque fois que quelque chose change qui en a besoin (comme une page de redimensionnement, etc). L'essayer

    Assurez-vous de définir le contexte.toile.largeur/hauteurpas de CSS largeur/hauteur. Notez également que la définition de la taille efface la toile.

    Comment j'allais l'écrire:

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

    var draw = function(){
        ctx.fillStyle = "#000";
        ctx.fillRect(10,10,50,50);   
    };

    $(function(){
        //set width and height
         ctx.canvas.height = 600;
         ctx.canvas.width = 600;
        //draw
        draw();

        //wait 2 seconds, repeate same process
        setTimeout(function(){
            ctx.canvas.height = 400;
            ctx.canvas.width = 400;
            draw();
        }, 2000)
    });
})();

  2. 9
     (function($) {  
        $.fn.extend({  
            //Let the user resize the canvas to the size he/she wants  
            resizeCanvas:  function(w, h) {  
                var c = $(this)[0]  
                c.width = w;  
                c.height = h  
            }  
        })  
    })(jQuery)

    Utiliser cette petite fonction que j'ai créé pour prendre soin de redimensionnement sur l'aller. L'utiliser de cette façon - 

    $("the canvas element id/class").resizeCanvas(desired width, desired height)
  3. 1

    Chaque fois que le navigateur est redimensionnée, la solution suivante redimensionne les dimensions de la toile sur la base des dimensions de la fenêtre par la création d'un premier rapport.

    Jsfiddle: http://jsfiddle.net/h6c3rxxf/9/

    Remarque: Le support doit être re-dessiné, lorsqu'elle est redimensionnée.

    HTML:

    <canvas id="myCanvas" width="300" height="300" >

    CSS:

    canvas {
    border: 1px dotted black;
    background: blue;
}

    JavaScript: 

    (function() {
    //get the precentage of height and width  of the cavas based on the height and width of the window
    getPercentageOfWindow = function() {
        var viewportSize = getViewportSize();
        var canvasSize = getCanvastSize();
        return {
            x: canvasSize.width / (viewportSize.width - 10),
            y: canvasSize.height / (viewportSize.height - 10)
        };
    };
    //get the context of the canvas 
    getCanvasContext = function() {
        return $("#myCanvas")[0].getContext('2d');
    };
    //get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width: window.innerWidth
        };
    };
    //get canvas size
    getCanvastSize = function() {
        var ctx = getCanvasContext();
        return {
            height: ctx.canvas.height,
            width: ctx.canvas.width
        };
    };
    //update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        var ctx = getCanvasContext();
        ctx.canvas.height = viewportSize.height * percentage.y;
        ctx.canvas.width = viewportSize.width * percentage.x;
    };
    var percentage = getPercentageOfWindow();
    $(window).on('resize', function() {
        updateSizes();
    });
}());