Chrome toile dégradé linéaire = Firefox Toile dégradé linéaire

Question

Eh bien, le problème est le suivant:

canvas = GreenCanvas.get(0).getContext('2d'); 
    grad = canvas.createLinearGradient(0,0,255,0); 
    grad.addColorStop(0, 'rgb('+r+','+0+','+b+')'); 
    grad.addColorStop(1, 'rgb('+r+','+255+','+b+')'); 
    canvas.fillStyle = grad; 
    canvas.fillRect(0,0,256,34); 

256 pixels. de par exemple rgb (0,0,0) à rgb (0,255,0)

Chrome 6.0.472: gradient (0,0,0) (0,1,0) (0,2,0) (0,3,0) (0,4,0) ... (0,255,0)

Firefox 3.6.6: gradient (0,0,0) (0,0,0) (0,1, 0) (0,2,0) ... (0,255,0)

Je voudrais voir quels programmes fonctionnent dans Firefox. Mais de toute façon, je voudrais savoir si c'est un vrai problème, ou est-ce que dans Firefox le dégradé est fait de cette manière. Ou s'il existe une autre manière de faire un dégradé bien fait sans trop utiliser de mémoire.

Answer 1

Il est connu que Chrome a des problèmes avec les dégradés Canvas pour le moment.

J'ai soumis un bogue à Chromium en raison du nombre de tests hixie (le rédacteur de spécifications) échouant sur Chrome.

En résumé, vous ne pouvez pas créer votre variable 'grad'. Vous devez le définir directement.

Cela fonctionne:

var context = document.getElementsByTagName('canvas')[0].getContext('2d'); 
    context.fillStyle = context.createLinearGradient(0, 0, 500, 300); 
    context.fillStyle.addColorStop(0, '#0000ff'); 
    context.fillStyle.addColorStop(1, '#ff00ff'); 
    context.fillRect(0, 0, 500, 300); 

Cela ne fonctionne pas, même si elles sont sensées faire la même chose:

var context = document.getElementsByTagName('canvas')[0].getContext('2d'); 
    var g = context.createLinearGradient(0, 0, 500, 300); 
    g.addColorStop(0, '#0000ff'); 
    g.addColorStop(1, '#ff00ff'); 
    context.fillStyle = g; 
    context.fillRect(0, 0, 500, 300); 

Pour l'instant, il suffit de faire la première manière.

Voici le rapport de bogue déposé début septembre.

http://code.google.com/p/chromium/issues/detail?id=54070&can=4&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS