javascript Canvas DrawImage() 质量差
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28498014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas DrawImage() poor quality
提问by Dachi
I have a problem with Html5 canvas
我的 Html5 画布有问题
i draw an image but its quality becomes very poor
我画了一个图像，但它的质量变得很差
after i draw it with canvas it becomes this
在我用画布绘制后，它变成了这个
my code is here
我的代码在这里
<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);
}
采纳答案by markE
You can incrementally scale your image down for better results.
您可以逐步缩小图像以获得更好的效果。
Since your final size is 1/4 the original size, you could:
由于您的最终尺寸是原始尺寸的 1/4，您可以：
scale the 1000x669 image in half to 500x334 onto a temp canvas
scale the 500x335 canvas in half to 250x167 onto the main canvas
将 1000x669 的图像对半缩放到 500x334 到临时画布上
将 500x335 画布对半缩放至 250x167 到主画布上
Here's example code and a 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>