画布DrawImage()质量较差 [英] Canvas DrawImage() poor quality
本文介绍了画布DrawImage()质量较差的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对Html5 canvas有问题
I have a problem with Html5 canvas
我绘制图像,但是图像质量很差
i draw an image but its quality becomes very poor
在我用画布绘制它之后,它就变成了
after i draw it with canvas it becomes this
我的代码在这里
<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);
}
推荐答案
您可以逐步缩小图像以获得更好的效果.
You can incrementally scale your image down for better results.
由于您的最终尺寸是原始尺寸的1/4,因此您可以:
Since your final size is 1/4 the original size, you could:
-
将1000x669图像的一半缩放到临时画布上的500x334
scale the 1000x669 image in half to 500x334 onto a temp canvas
将500x335画布的一半缩放到主画布上的250x167
scale the 500x335 canvas in half to 250x167 onto the main canvas
这是示例代码和演示:
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>
这篇关于画布DrawImage()质量较差的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文