3

私は次のチュートリアルに従っています: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

私の問題は、線がぼやけていて、ウェブサイトのようにしっかりしていて美しくないことです.

コードは次のとおりです。

    var canvas = document.getElementById("rightSide");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(200, 100);
    context.stroke();


#leftSide {
    width:200px;
    padding:15px;
    background:#eee;
    border:1px solid #aaa;
    float: left;
}

#rightSide {
    width:1000px;
    height: 700px;
    padding:15px;
    background:#eee;
    border:1px solid #aaa;
    float: left;
    margin:0px 0px 0px 20px;
}


<div id="leftSide">
    <a class="trigger" href="#">Areas</a>
    <ul class="level1">
                <li><a href="http://www.google.com">Area 1</a></li>
                <li><a href="#">Area 2</a></li>
                <li><a href="#">Area 3</a></li>
                <li><a href="#">Area 4</a></li>
                <li><a href="#">Area 5</a></li>
                <li><a href="#">Area 6</a></li> 
    </ul>

</div>

<canvas id="rightSide"></canvas>

ありがとう

編集：私は実際に非常に興味深いものを見つけましたが、それがどのように異なるのかまだ理解していません. キャンバスサイズの座標をCSSからタグに移動したら、線が正常に表示されました。

キャンバス id="rightSide" width="800px" height="600px">

ここで何が起こっているのかについての説明を非常に望んでいます。ありがとう。

4

2 に答える 2

4

Parthの回答（コメントで正しく識別されている）に基づいて構築するために、キャンバスの実際のサイズはCSSではなく属性で定義されます。

たとえば、次のコードの場合、描画領域は 200x200 ではなく 100x100 になります。ぼかし効果は、同じ CSS を使用した 100x100 の画像がある場合と同じになります。

<style>
    canvas {width: 200px; height: 200px}
</style>
<canvas width="100" height="100"></canvas>

これは実際、iPhone 4 や iPad 3 などの各デバイス ピクセルに 4 つの物理ピクセルがあるデバイスにとって興味深い意味を持ちます。その場合、適切なサイズのキャンバス (100x100 に対して 100x100 はぼやけます)。その場合、鮮明な画像を得るには実際にキャンバスを 2 倍にする必要があります。

<style>
    canvas {width: 200px; height: 200px}
</style>
<canvas id="retina" width="400" height="400"></canvas>
于 2012-05-23T22:58:20.597 に答える
0

ブラウザーは通常、描画された線のアンチ エイリアシングを行います (実際には、lineTo、arcTo、quadraticCurveTo などのコンテキスト関数を使用するもの)。

したがって、始点 (50,50) & 終点 (300,50) を指定すると、それがアンチエイリアスされるため、49.5-50 && 55-55.5 (線幅が 5 の場合)。

そのため、浮動小数点で座標を指定することで解決できる場合があります。ブラウザーは浮動小数点座標を受け入れ、それを無視しません。線画アルゴリズムで浮動小数点数を使用します (dda の可能性があります。正確にはわかりません)。

これが例です:: http://jsfiddle.net/parth1403/xt7dN/2/

于 2012-05-18T07:16:20.830 に答える