☰

HTML5 キャンバス内のぼやけたテキストを修正するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript html html5-canvas
HTML5 キャンバス内のぼやけたテキストを修正するにはどうすればよいですか? 質問する

私は完全に初心者を使って、図形、色、テキストをレンダリングしていHTML5ます。私のアプリでは、canvasビューアダプタ動的にキャンバスを作成し、コンテンツで埋める。これは非常にうまく機能しますが、テキストが非常にぼやけてぼやけて伸びてしまいます。幅そして身長ではCSSこの問題が発生しますが、私はすべてを で定義しています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);
<div id="layout-content"></div>

私が目にしている結果は（サファリ) は、Fiddle で示されているよりもはるかに歪んでいます。

私の

Safariでレンダリングされた出力

フィドル

JSFiddle でレンダリングされた出力

何が間違っているのでしょうか? テキスト要素ごとに別のキャンバスが必要ですか? フォントの問題でしょうか? 最初に HTML5 レイアウトでキャンバスを定義する必要がありますか? タイプミスでしょうか? わかりません。

ベストアンサー1

キャンバス要素は、デバイスまたはモニターのピクセル比とは独立して実行されます。

iPad 3+ では、この比率は 2 です。つまり、1000 ピクセル幅のキャンバスを iPad ディスプレイの指定幅に合わせるには、2000 ピクセルを埋める必要があります。幸いなことに、これはブラウザによって自動的に行われます。一方、表示領域に直接収まるように作成された画像やキャンバス要素の解像度が低く見えるのも、このためです。キャンバスは 1000 ピクセルを埋める方法しか知らないのに、2000 ピクセルに描画するように要求されるため、ブラウザはピクセル間の空白をインテリジェントに埋めて、要素を適切なサイズで表示する必要があります。

ぜひ読んでみてくださいこの記事からウェブ開発高解像度の要素を作成する方法について詳しく説明します。

tl;dr? 以下は、適切な解像度のキャンバスを出力するために私自身のプロジェクトで使用している例 (上記のチュートリアルに基づく) です。

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

おすすめ記事