Javascript 画布DrawImage（）质量差

我对Html5画布有一个问题

我画了一幅图像，但它的质量变得很差

我用画布画出来后，它变成了这样

我的密码在这里

<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);
}

$canvasWidth=$（“#canvas”）.width；
$canvasHeight=$（“#canvas”）.height；
varα=0.0；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
函数绘图（）{
varδ=0.05；
ctx.clearRect（0,0，$canvasWidth，$canvasHeight）；
ctx.globalAlpha=α；
var logo=新图像（）；
WandioLight.onload=函数（）{
ctx.drawImage（徽标，0,0,250,167）；
};
logo.src=“logo.png”；
α+=δ；
如果（α>1.0）{
返回false；
}
设置超时（抽签，50）；
}

您可以逐步缩小图像以获得更好的效果

由于最终尺寸为原始尺寸的1/4，您可以：

• 将1000x669图像对半缩放到500x334到临时画布上

• 将500x335画布对半缩放至250x167到主画布上

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/wandio.png";
函数start（）{
//将1000x669图像对半缩放到500x334到临时画布上
var c1=标度指数（img，0.50）；
//将500x335画布对半缩放至250x167到主画布上
画布宽度=c1.width/2；
画布高度=c1.height/2；
ctx.drawImage（c1,0,0250167）；
}
函数scaleIt（源，scaleFactor）{
var c=document.createElement（'canvas'）；
var ctx=c.getContext（'2d'）；
var w=源.width*scaleFactor；
var h=源高度*缩放因子；
c、 宽度=w；
c、 高度=h；
ctx.drawImage（源，0,0，w，h）；
返回（c）；
}

body{背景色：象牙色；填充：10px；}
画布{边框：1px纯红；}

---

是否从css文件设置画布宽度和高度？我认为这是在设置

宽度

和

高度

时出现的缩放问题，请尝试使用

样式

属性。徽标文件的宽度和高度是多少？原始宽度和高度是1000X669