2015-02-13 19 views
5

Ich habe ein Problem mit Html5 LeinwandLeinwand DrawImage() schlechte Qualität

Ich zeichne ein Bild, aber die Qualität wird sehr schlecht enter image description here

, nachdem ich es mit Leinwand ziehe es diese

enter image description here wird

mein Code ist hier

<script type="text/javascript"> 

$canvasWidth = $('#canvas').width; 
$canvasHeight = $('#canvas').height; 
var alpha = 0.0; 

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


function draw(){ 
    var delta = 0.05; 
    ctx.clearRect(0,0,$canvasWidth, $canvasHeight); 
    ctx.globalAlpha = alpha; 

    var logo= new Image(); 

    WandioLight.onload = function(){ 
     ctx.drawImage(logo, 0, 0, 250, 167); 

    }; 

    logo.src = "logo.png"; 

    alpha += delta; 
    if(alpha > 1.0){ 
     return false; 
    } 
    setTimeout(draw, 50); 
} 

+0

tun Sie die Leinwand Breite und Höhe von CSS-Datei gesetzt? –

+0

ich habe dies in html – Dachi

+0

Ich glaube, das ist ein Skalierungsproblem, das auftritt, wenn "width" und 'height' versuche es mit dem' style' Attribut. – James

Antwort

6

enter image description here

Sie Ihr Bild schrittweise skalieren können für bessere Ergebnisse nach unten.

Da Ihre endgültige Größe 1/4 ist die ursprüngliche Größe, man kann:

  • Skala der 1000x669 Bild in Hälfte auf 500x334 auf eine temporäre Leinwand

  • Skala der 500x335 Leinwand in zwei Hälften 250x167 auf die Haupt Leinwand

Hier ist Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/wandio.png"; 
 
function start(){ 
 

 

 
    // scale the 1000x669 image in half to 500x334 onto a temp canvas 
 
    var c1=scaleIt(img,0.50); 
 

 
    // scale the 500x335 canvas in half to 250x167 onto the main canvas 
 
    canvas.width=c1.width/2; 
 
    canvas.height=c1.height/2; 
 
    ctx.drawImage(c1,0,0,250,167); 
 

 
} 
 

 
function scaleIt(source,scaleFactor){ 
 
    var c=document.createElement('canvas'); 
 
    var ctx=c.getContext('2d'); 
 
    var w=source.width*scaleFactor; 
 
    var h=source.height*scaleFactor; 
 
    c.width=w; 
 
    c.height=h; 
 
    ctx.drawImage(source,0,0,w,h); 
 
    return(c); 
 
}
body{ background-color: ivory; padding:10px; } 
 
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>