HTML5キャンバスでぼやけた形状のエッジを修正するにはどうすればよいですか？

私はキャンバス要素を使って非常に単純な矩形を作った。しかし、fillRect（x、y、width、height）のxとyの引数が0と0以外の値であれば、ズームや携帯端末ではすべてのエッジが完全にぼやけて見えます。 xとyがARE 0と0の場合、四角形の上端と左端は、ズームインされていても、下端と右端がぼやけていてもスーパー定義されます。 Chrome/Firefoxを使用した1920x1080の画面と、Safariを使用した750x1334のモバイル画面でこれをレンダリングしています。HTML5キャンバスでぼやけた形状のエッジを修正するにはどうすればよいですか？

これはデスクトップでは100％ズームでは問題ありませんが、モバイルデバイスではクラップスのように見えます。また、ChromeとFirefoxだけでなく、JSFiddleを完全に拡大すると、ぼやけたエッジがはっきりと確認できます。私はCSSを使ってキャンバスの幅と高さを調整していません。これはキャンバスの属性やJSを使って行われます。これをブラウザでテストするために使用したHTMLは以下のとおりです。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    </head> 

    <body> 
     <canvas id="gameCanvas" width="150" height="150">A game.</canvas> 

     <script> 
      var canvas = document.getElementById("gameCanvas"); 
      var ctx = canvas.getContext("2d"); 

      ctx.fillRect(0, 0, 100, 100); 
     </script> 
    </body> 
</html>

編集：1ピクセルの線を描画しようとしていません。私は半分のピクセル値でも試してみましたが、ぼやけたエッジを悪化させました。

最初の2つのスクリーンショットは、SafariのiPhone 7スクリーンからのものであり、ズームされていないものとズームされていないものです。最後のスクリーンショットは1920x1080のラップトップ画面で、Chromeで拡大表示されます。

出典

2017-03-03 Pearu

の可能性のある重複[線状キャンバス図面は、ぼやけている（http://stackoverflow.com/questions/8696631/canvas-drawings -like-lines-are-blurry） –

私は半分のピクセル値で実験を試みましたが、それだけでそれらをさらに悪化させました。そして私は1ピクセルの線を描画していない、私は長方形を描画しています。 – Pearu

http://stackoverflow.com/q/28057881/215552同じ修正。 –

私が間違っていたものを考え出しました。デバイスのプロパティはdevice-pixel-ratioでした。 1以外の値は、ピクセル化されたキャンバスコンテンツになります。ブラウザのズームを調整すると、device-pixel-ratioが変更され、一部のデバイスには網膜ディスプレイのiPhoneなどのデバイスピクセル比が高くなります。

Javascriptを使用してこれを考慮する必要があります。他の方法はありません。 I wrote about this in more detail on my blog, and provide some other sources as well.

以下の最終結果が表示されます。

バニラJavaScriptを使用して応答キャンバス：

var aWrapper = document.getElementById("aWrapper"); 
 
var canvas = document.getElementById("myCanvas"); 
 

 
//Accesses the 2D rendering context for our canvasdfdf 
 
var ctx = canvas.getContext("2d"); 
 

 
function setCanvasScalingFactor() { 
 
    return window.devicePixelRatio || 1; 
 
} 
 

 
function resizeCanvas() { 
 
    //Gets the devicePixelRatio 
 
    var pixelRatio = setCanvasScalingFactor(); 
 

 
    //The viewport is in portrait mode, so var width should be based off viewport WIDTH 
 
    if (window.innerHeight > window.innerWidth) { 
 
     //Makes the canvas 100% of the viewport width 
 
     var width = Math.round(1.0 * window.innerWidth); 
 
    } 
 
    //The viewport is in landscape mode, so var width should be based off viewport HEIGHT 
 
    else { 
 
     //Makes the canvas 100% of the viewport height 
 
     var width = Math.round(1.0 * window.innerHeight); 
 
    } 
 

 
    //This is done in order to maintain the 1:1 aspect ratio, adjust as needed 
 
    var height = width; 
 

 
    //This will be used to downscale the canvas element when devicePixelRatio > 1 
 
    aWrapper.style.width = width + "px"; 
 
    aWrapper.style.height = height + "px"; 
 

 
    canvas.width = width * pixelRatio; 
 
    canvas.height = height * pixelRatio; 
 
} 
 

 
var cascadeFactor = 255; 
 
var cascadeCoefficient = 1; 
 

 
function draw() { 
 
    //The number of color block columns and rows 
 
    var columns = 5; 
 
    var rows = 5; 
 
    //The length of each square 
 
    var length = Math.round(canvas.width/columns) - 2; 
 
    
 
    //Increments or decrements cascadeFactor by 1, based on cascadeCoefficient 
 
    cascadeFactor += cascadeCoefficient; 
 

 
    //Makes sure the canvas is clean at the beginning of a frame 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    for (var i = columns; i >= 1; i--) { 
 
    for (var j = rows; j >= 1; j--) { 
 
     //Where the color magic happens 
 
     ctx.fillStyle = "rgba(" + (j*i*(cascadeFactor-110)) + "," + (i*cascadeFactor) + "," + (j*cascadeFactor) + "," + 0.6 + ")"; 
 
     
 
     ctx.fillRect((length*(i-1)) + ((i-1)*2), (length*(j-1)) + ((j-1)*2), length, length); 
 
    } 
 
    } 
 
    
 
    if (cascadeFactor > 255 || cascadeFactor < 0) { 
 
    //Resets the color cascade 
 
    cascadeCoefficient = -cascadeCoefficient; 
 
    } 
 
    //Continuously calls draw() again until cancelled 
 
    var aRequest = window.requestAnimationFrame(draw); 
 
} 
 

 
window.addEventListener("resize", resizeCanvas, false); 
 

 
resizeCanvas(); 
 
draw();

#aWrapper { 
 
    /*Horizontally centers the canvas*/ 
 
    margin: 0 auto; 
 
} 
 

 
#myCanvas { 
 
    /*This eliminates inconsistent rendering across browsers, canvas is supposed to be a block-level element across all browsers anyway*/ 
 
    display: block; 
 

 
    /*myCanvas will inherit its CSS width and style property values from aWrapper*/ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
asdfasdf

<div id="aWrapper"> 
 
    <!--Include some fallback content on the 0.00001% chance your user's browser doesn't support canvas --> 
 
    <canvas id="myCanvas">Fallback content</canvas> 
 
</div>

出典

2017-05-13 22:36:59 Pearu

HTML5キャンバスでぼやけた形状のエッジを修正するにはどうすればよいですか？

答えて

関連する問題