html5キャンバスストローク（）厚くてファジー

StackOverflow https://stackoverflow.com/questions/3991113

質問

ユーザーがキャンバスに長方形を描画できるようにしようとしています（選択ボックスなど）。私はいくつかのばかげた結果を得ていますが、その後、私の参照からコードを試しているだけでさえ気づきました ここ, 、私は巨大なファジーラインを手に入れ、理由がわかりません。

でホストされています dylanstestserver.com/drawcss. 。 JavaScriptはインラインなので、チェックアウトできます。私はjQueryを使用して、マウス座標の取得を簡素化しています。

役に立ちましたか？

解決

何らかの理由で、キャンバスが伸びています。 CSSプロパティがあるためです width に設定 100%, 、ある種のネイティブサイズから伸びています。これは、CSSの使用の違いです width 財産と width の属性 <canvas> 鬼ごっこ。ビューポートを埋めるために、JavaScriptを少し使用してみてください（jquery .width（）を参照してください):

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...

他のヒント

CSSを使用して、キャンバス要素の高さと幅を設定する代わりにキャンバスの高さと幅を設定すると、ぼやけの問題が発生します。 

<style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

私のやり方は、Canvas要素をCSSの幅と高さに設定し、Canvas.Width = canvas.ClientWidthおよびcanvas.height = canvas.clientheightを設定することです。

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");

キャンバスサイズをピクセルで示していないため、拡張されています。ここは300x150です。幅、高さを設定してみてください

Retinaディスプレイでは、（受け入れられた答えに加えて）スケーリングする必要があります。

var context = canvas.getContext('2d');
context.scale(2,2);

これらのコメントに記載されているCSSサイジングの問題は正しいですが、ぼやけた行を引き起こす可能性のある別のより微妙なことは、電話をかけるのを忘れていることです context.beginPath() 線を引く前に。これを呼び出すことなく、あなたはまだ線を得るでしょうが、それはスムーズにされず、線が一連のステップのように見えます。

私がぼやけている理由は、インライン幅とCSS幅の間にわずかな矛盾があるためだとわかりました。

網膜画面のインライン寸法を増やしながら、物理的寸法を静的に保つ必要があるため、キャンバスに割り当てられたインライン幅/高さパラメーターとCSS幅/高さの両方を持っています。

あなたが私のような状況がある場合、あなたのものが同じであることを確認してください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top