Question

我有一个在其上绘制图像的画布。如果我用％css设置画布大小，那么图像会非常模糊。如果我以像素为单位设置它，那么图像绘制得很好。

#myCanvas{
    border:1px dotted black;
    width:100%;
}
img{
    width:100%;
    height:150px;
}

<canvas id="myCanvas">Your Phone is Not Compatible With the APP.</canvas>
<p></p>
<img src="http://www.artlimited.net/user/0/0/1/4/9/7/9/artlimited_img175960.jpg">

$("document").ready(function(){    
    function drawcanvas(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var imageObj = new Image();
        imageObj.src ="http://www.artlimited.net/user/0/0/1/4/9/7/9/artlimited_img175960.jpg";
        imageObj.onload = function() {
            context.drawImage(imageObj, 0, 0,context.canvas.width,context.canvas.height);
            document.querySelector("p").innerHTML="canvas height="+context.canvas.height+"canvas width="+context.canvas.height;     
        };
    }
    drawcanvas();
});

http://jsfiddle.net/prantikv/vvu6myy6/7/

Answer 1

尝试将您的上下文翻译半个像素：

context.translate(0.5, 0.5);

然后再次给出画布％width。它应该停止显示模糊的图像。

这是禁用画布抗锯齿的常用方法（我认为是图像模糊的原因）

使用CSS的响应式HTML5画布

1 个答案: