web-dev-qa-db-ja.com

HTML5 canvas stroke（）太くてぼやけている

ユーザーがキャンバス上に長方形を選択できるようにしようとしています（選択ボックスのように）。とんでもない結果が出ていますが、リファレンスからコードを試してみても here で、ファジーな巨大な行が表示され、その理由がわかりません。

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

javascripthtmlcanvasstroke
29
Nona Urbiz

何らかの理由で、キャンバスが引き伸ばされています。 cssプロパティwidthが100%に設定されているため、ある種のネイティブサイズから拡大されています。これは、<canvas>タグでcss widthプロパティとwidth属性を使用することの違いです。あなたはそれをビューポートいっぱいにするために少しJavaScriptを使ってみるのもいいかもしれません（ jQuery .width（）を参照してください ）：

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

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

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

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

私が行う方法は、キャンバス要素を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");
10
miller the gorilla

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

3
artificialidiot

Retinaディスプレイでは、（承認された回答に加えて）スケーリングも必要です。

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

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

2
Scott Antipa

私がぼやけている理由は、インライン幅とCSS幅の間にわずかな差異があったためです。

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

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

0
Fijjit