您的位置：首页 > 其它

Canvas-drawImage 绘制图片模糊问题

2016-05-12 17:50 597 查看

最近遇到这样的问题，使用canvas输出图片，图片比canvas区域大，尺寸限制之后反而变得特别模糊：

代码：

var c = document.getElementById("myimage");//canvas的id
var ctx=c.getContext("2d");
var img=new Image();
img.src = 图片地址;
img.addEventListener('load',imgin);
function imgin(){
c.width = $(window).width();
c.height = $(window).width()*img.height/img.width;
clearInterval(m);
ctx.clearRect(0,0,c.width,c.height);
ctx.drawImage(img,0,0,c.width,c.height);
}
$(window).resize(function(){
imgin();
});

解决：先让图片以原先尺寸呈现，再用css限制：

var c = document.getElementById("myimage");<span style="font-family: Arial, Helvetica, sans-serif;">//canvas的id</span>
var ctx=c.getContext("2d");
var img=new Image();
img.src = ...;//<span style="font-family: Arial, Helvetica, sans-serif;">图片地址;</span>
img.addEventListener('load',imgin);
function imgin(){
// c.width = $(window).width();
// c.height = $(window).width()*img.height/img.width;
c.width = img.width;//////////重点
c.height = img.height;<//////////重点
clearInterval(m);
ctx.clearRect(0,0,c.width,c.height);
ctx.drawImage(img,0,0,c.width,c.height);
c.style.width = '100%';//////////重点
}
$(window).resize(function(){
imgin();
});

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas

相关文章推荐

新的分享

章节导航