32

ユーザーが（選択ボックスのように）キャンバスに長方形を描画できるようにしようとしています。ばかげた結果が出ていますが、ここで参照しているコードを試してみても、非常にあいまいな行が表示され、その理由がわかりません。

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

4

7 に答える 7

63

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

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

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES
于 2012-10-12T16:00:09.840 に答える
36

何らかの理由で、キャンバスが引き伸ばされています。cssプロパティwidthがに設定されているため100%、ある種のネイティブサイズから拡張しています。widthこれは、cssプロパティとタグの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');
    //...
于 2010-10-21T19:44:34.820 に答える
12

私のやり方は、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");
于 2016-02-18T00:17:03.857 に答える
4

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

于 2010-10-21T19:52:40.343 に答える
4

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

var context = canvas.getContext('2d');
context.scale(2,2);
于 2014-05-20T22:35:15.633 に答える
2

context.beginPath()これらのコメントで言及されているCSSのサイズ設定の問題は正しいですが、線がぼやける原因となる可能性のあるもう1つの微妙な点は、線を引く前に呼び出しを行うのを忘れていることです。これを呼び出さなくても、線は表示されますが、線が一連のステップのように見えるように平滑化されません。

于 2015-01-21T08:49:20.723 に答える
0

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

インラインの幅/高さのパラメーターとcssの幅/高さの両方をキャンバスに割り当てています。これは、網膜スクリーンのインラインの寸法を大きくしながら、物理的な寸法を静的に保つ必要があるためです。

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

于 2014-08-30T21:56:58.740 に答える