javascript - 如何修复 HTML5 Canvas 中的模糊文本？

Question

我完全 n00b HTML5 并且正在使用 canvas 渲染形状、颜色和文本。在我的应用程序中，我有一个动态创建 Canvas 并用内容填充它的 View 适配器。这真的很好用，只是我的文本呈现得非常模糊/模糊/拉伸(stretch)。我看过很多其他帖子，解释为什么在 CSS 中定义 width 和 height 会导致这个问题，但我在 javascript。

相关代码(查看Fiddle):

var width  = 500;//FIXME:size.w;
var height = 500;//FIXME:size.h;
    
var canvas = document.createElement("canvas");
//canvas.className="singleUserCanvas";
canvas.width=width;
canvas.height=height;
canvas.border = "3px solid #999999";
canvas.bgcolor = "#999999";
canvas.margin = "(0, 2%, 0, 2%)";
    
var context = canvas.getContext("2d");

//////////////////
////  SHAPES  ////
//////////////////
    
var left = 0;

//draw zone 1 rect
context.fillStyle = "#8bacbe";
context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);

left = left + canvas.width*1.5/8.5;

//draw zone 2 rect
context.fillStyle = "#ffe381";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);

left = left + canvas.width*2.75/8.5 + 1;

//draw zone 3 rect
context.fillStyle = "#fbbd36";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);

left = left + canvas.width*1.25/8.5;

//draw target zone rect
context.fillStyle = "#004880";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);

left = left + canvas.width*0.25/8.5;
    
//draw zone 4 rect
context.fillStyle = "#f8961d";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);

left = left + canvas.width*1.25/8.5 + 1;

//draw zone 5 rect
context.fillStyle = "#8a1002";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);

////////////////
////  TEXT  ////
////////////////

//user name
context.fillStyle = "black";
context.font = "bold 18px sans-serif";
context.textAlign = 'right';
context.fillText("User Name", canvas.width, canvas.height*.05);

//AT:
context.font = "bold 12px sans-serif";
context.fillText("AT: 140", canvas.width, canvas.height*.1);

//AB:
context.fillText("AB: 94", canvas.width, canvas.height*.15);
       
//this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout.
var parent = document.getElementById("layout-content");
parent.appendChild(canvas);

<div id="layout-content"></div>

我看到的结果(在 Safari 中)比 Fiddle 中显示的结果更偏斜:

我的

fiddle

我做错了什么？每个文本元素都需要单独的 Canvas 吗？是字体吗？我需要先在 HTML5 布局中定义 Canvas 吗？有错字吗？我迷路了。

Answer 1

Canvas 元素独立于设备或显示器的像素比运行。

在 iPad 3+ 上，这个比率是 2。这实际上意味着您的 1000 像素宽度的 Canvas 现在需要填充 2000 像素以匹配它在 iPad 显示屏上规定的宽度。对我们来说幸运的是，这是由浏览器自动完成的。另一方面，这也是为什么在直接适合其可见区域的图像和 Canvas 元素上看到清晰度较低的原因。因为您的 Canvas 只知道如何填充 1000 像素，但被要求绘制到 2000 像素，浏览器现在必须智能地填充像素之间的空白，以便以适当的大小显示元素。

我强烈建议您阅读 this article来自 HTML5Rocks其中更详细地解释了如何创建高清元素。

tl；博士？这是我在自己的项目中使用的示例(基于上面的教程)以正确的分辨率吐出 Canvas :

var PIXEL_RATIO = (function () {
    var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1;

    return dpr / bsr;
})();


createHiDPICanvas = function(w, h, ratio) {
    if (!ratio) { ratio = PIXEL_RATIO; }
    var can = document.createElement("canvas");
    can.width = w * ratio;
    can.height = h * ratio;
    can.style.width = w + "px";
    can.style.height = h + "px";
    can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
    return can;
}

//Create canvas with the device resolution.
var myCanvas = createHiDPICanvas(500, 250);

//Create canvas with a custom resolution.
var myCustomCanvas = createHiDPICanvas(500, 200, 4);

希望这对您有所帮助!