使用 CSS 的响应式 HTML5 画布答案

【问题标题】：Responsive HTML5 Canvas Using CSS使用 CSS 的响应式 HTML5 画布
【发布时间】：2014-11-04 15:19:27
【问题描述】：

我有一个可以在上面绘制图像的画布。如果我通过 css in % 设置画布大小，那么图像会变得非常模糊。如果我将其设置为像素，则图像绘制得很好。

#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/

【问题讨论】：

我需要提高图像的分辨率，因为你看到它非常糟糕
使用js设置画布的宽高。 canvas 元素在绘制时不会考虑 % 值。width 属性默认为 300，height 属性默认为 150..
PS：在onload函数后面设置src，也可以用canvas.width代替context.canvas.width。

标签： javascript html canvas

【解决方案1】：

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

context.translate(0.5, 0.5);

然后再次给画布 % 宽度。它应该停止显示模糊的图像。

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

【讨论】：

翻译或不翻译你不能指望 400x400 的图像在 800x800 上自动看起来很棒。无论哪种情况，它看起来都很模糊。