Mise à l'échelle de la toile élément statique de la résolution

J'ai élément canvas et je tiens à l'échelle vers le bas, mais sans en changer la js logique. L'espace de dessin en js doit toujours être 600x300px, même si elle est affichée en HTML de la 300x150px. Je sais, je peux redimensionner l'image statique de la résolution, mais je peux faire la même avec de la toile?

OriginalL'auteur ciembor | 2012-03-16

  1. 17

    La modification de la taille à l'aide de CSS échelles

    Démonstration En Direct

    Donc, fondamentalement, vous définissez sa taille pour les objets de dessin, etc, via le width et height propriétés comme

    var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 300;

    et modifiez sa taille d'affichage à l'aide de css

    #canvas{
   width: 300px;
   height: 150px; 
}​

    OriginalL'auteur Loktar

  2. 9

    Loktar a une façon, à l'aide de CSS, mais qui pourrait causer quelques choses à rechercher drôle. Par exemple, les chemins de l'échelle à l'aide de CSS et mise à l'échelle à l'aide de la toile de transformations peuvent paraître très différentes (avec le CSS ceux qui cherchent la bad et de la toile de ceux qui cherchent la lisse). Cela dépend du navigateur, bien que peut-être parfaitement bien. Sur chrome au moins, le texte mis à l'échelle de cette façon, l'air très mauvais.

    Au lieu de cela, je vous recommande de regarder ce que j'ai écrit ici à propos de la notion de "modèle" coordonnées: De travail avec de la toile dans différentes tailles d'écran

    Tout écrire comme si l'espace de dessin est 600x300, mais de garder une toile qui est 300x150.

    Avant de dessiner quelque chose d'utilisation ctx.scale(0.5, 0.5); et tout sera grand!

    Il est tout à fait possible d'écrire une toile d'application et de l'échelle à toutes sortes d'écrans, même si vous êtes juste en ciblant un taille de l'écran.

    Ah nice oublié scale 😛
    Merci, mais @Loktar solution s'intègre bien dans mon cas:).

    OriginalL'auteur Simon Sarris