如何修正HTML5画布中的模糊文字？

问题描述

我总共 n00b 包含 HTML5 ，并且正在使用画布来渲染形状，颜色和文本。在我的应用程序中，我有一个动态创建画布的视图适配器，并用内容填充它。这非常好，除了我的文本呈现非常模糊/模糊/拉伸。我看过很多关于为什么在 CSS 中定义 width 和 height 会导致此问题的其他帖子，但是我将它全部定义在 javascript 。

相关代码（view .html5rocks.com> HTML5Rocks ，它更详细地解释了如何创建高清元素。

tl; dr？
下面是一个示例（基于上面的tut），我在我自己的项目中使用了适当的分辨率来绘制画布：

  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 =函数（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）; 
可以返回; 
} 
 
 //用设备分辨率创建画布。 
 var myCanvas = createHiDPICanvas（500，250）; 
 
 //使用自定义分辨率创建画布。 
 var myCustomCanvas = createHiDPICanvas（500，200，4）; 
  

希望这有助于您！

I am a total n00b with HTML5 and am working with the canvas to render shapes, colors, and text. In my app, I have a view adapter that creates a canvas dynamically, and fills it with content. This works really nicely, except that my text is rendered very fuzzy/blurry/stretched. I have seen a lot of other posts on why defining the width and height in CSS will cause this issue, but I define it all in javascript.

The relevant code (view Fiddle):

HTML

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

Javascript

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);

The results I am seeing (in Safari) are much more skewed than shown in the Fiddle:

Mine

Fiddle

What am I doing incorrectly? Do I need a separate canvas for each text element? Is it the font? Am I required to first define the canvas in the HTML5 layout? Is there a typo? I am lost.

解决方案

The canvas element runs independent from the device or monitor's pixel ratio.

On the iPad 3+, this ratio is 2. This essentially means that your 1000px width canvas would now need to fill 2000px to match it's stated width on the iPad display. Fortunately for us, this is done automatically by the browser. On the other hand, this is also the reason why you see less definition on images and canvas elements that were made to directly fit their visible area. Because your canvas only knows how to fill 1000px but is asked to draw to 2000px, the browser must now intelligently fill in the blanks between pixels to display the element at its proper size.

I would highly recommend you read this article from HTML5Rocks which explains in more detail how to create high definition elements.

tl;dr?Here is an example (based on the above tut) that I use in my own projects to spit out a canvas with the proper resolution:

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);

Hope this helps!

这篇关于如何修正HTML5画布中的模糊文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！