Dessin sur toile et affichage Retina: faisable?

De travail avec phoneGap la mise en œuvre de dessin avec de la Toile. Le hic, nous avons rencontré est que la toile s'attend spécifiques des dimensions en pixels. C'est bien sauf que l'iPhone 4 de l'affichage de la Rétine, à partir d'un CSS/Webkit POV est encore 320px de large, même si, techniquement, il y a 640 réel de pixels de l'écran.

Est-il de toute façon à adapter l'affichage de la rétine à l'aide de Toile sur Webkit tout en préservant la compatibilité avec les écrans retina?

source d'informationauteur DA.

  1. 28

    Je me suis assis avec le même problème la semaine dernière et a découvert comment le résoudre - 

    var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth;
    canvas.style.height = canvasHeight;

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

    Code complet sur les gistdémo sur jsfiddle

  2. 3

    Il y a une baisse de polyfill qui va prendre soin de la plupart de base opérations de dessin pour vous, et de lever l'ambiguïté entre les navigateurs qui gèrent automatiquement pour vous (safari) et d'autres qui ne le sont pas.

    https://github.com/jondavidjohn/hidpi-canvas-polyfill

    Il vous suffit de l'inclure avant votre code de dessin et il devrait vous donner décent rétine automatiquement la prise en charge.

  3. 0

    WebCode (http://www.webcodeapp.com) est une application de dessin vectoriel qui génère du JavaScript HTML5 Canvas code pour vous. Le code est de la Rétine-compatible, vous pouvez voir comment ils le font.

  4. 0

    Il ya une très bonne polyfill par TJ Holowaychuk:

    https://www.npmjs.com/package/autoscale-canvas

  5. 0

    EDIT: Viens de remarquer que j'ai posté dans le mauvais lien pour la démo!

    De la rétine (ou d'autres hdpi affichage) en toile de résolution est certainement possible. Il y a un exemple ici:

    http://spencer-evans.com/share/github/canvas-resizer/

    J'ai aussi croisé quelques fois. Le accepté le code de réponse est correct, mais vous pouvez également utiliser une bibliothèque de solution. J'ai fouetté jusqu'à la poignée intelligente toile de re-dimensionnement de rendre l'élément le plus sensible et de plus haute résolution (comme montré dans la démo).

    https://github.com/swevans/canvas-resizer