Html5 Canvas et de Ses contenus image sensible sur tous les navigateurs

J'ai un canvas que j'ai envie de mettre une image dans une application web. Je peux obtenir l'image chargée, mais j'ai couru en 2 problèmes: L'image ne sera pas étirer la toile et la toile ne s'étire pas à couvrir l'ensemble de la div dans n'importe quel navigateur, mais Firefox.

http://jsfiddle.net/LFJ59/1/

var canvas = $("#imageView");
var context = canvas.get(0).getContext("2d");

$(document).ready(drawImage());
$(window).resize(refreshCanvas());

refreshCanvas();

function refreshCanvas() {
    //canvas/context resize
    canvas.attr("width", $(window).get(0).innerWidth / 2);
    canvas.attr("height", $(window).get(0).innerHeight / 2);
    drawImage();
};

function drawImage() {
    //shadow
    context.shadowBlur = 20;
    context.shadowColor = "rgb(0,0,0)";

    //image
    var image = new Image();
    image.src = "http://www.netstate.com/states/maps/images/ca_outline.gif";
    $(image).load(function () {
        image.height = canvas.height();
        image.width = canvas.width();
        context.drawImage(image);
    });
};

Est-il une solution pour faire la toile sensible? Ou dois-je tout simplement besoin de verrouiller la toile et de l'image vers le bas pour des tailles prédéfinies?

OriginalL'auteur ChargerIIC | 2014-01-13

  1. 9

    width et height de l'image sont en lecture seule afin que ne fonctionnera pas.

    Essayez plutôt:

     context.drawImage(image, 0, 0, canvas.width, canvas.height);

    Cela permettra de dessiner l'image de la même dimension que la toile est (vous n'avez pas besoin de recharger l'image à chaque fois btw. - il suffit de charger une fois à l'échelle mondiale, et de réutiliser la image variable).

    OriginalL'auteur

  2. 3
    <canvas id="imageView" width="1000" height="1000" style="width:100%; height:100%"></canvas>

    CSS et la hauteur et la largeur des attributs peuvent être utilisés et n'ont pas besoin d'être d'accord en taille. Le style CSS permettra de déterminer la taille d'affichage, vous avez demandé une toile qui peut s'étirer. La largeur et la hauteur de contrôler le nombre de pixels de la toile utilise pour le dessin.

    par exemple ce sera réduite de 10 à 1, et avec l'anti-aliasing de défilement d'un dessin dans cette toile serait aussi lisse comme de la soie.

    <canvas id="imageView" width="1000" height="1000" style="width:100px; height:100px"></canvas>

    Si le CSS n'est pas utilisé, leurs valeurs par défaut seront les attributs width et height de l'élément canvas.

    OriginalL'auteur Wayne