1

線の描画に HTML5 を使用しています。ただし、キャンバスの幅と高さが大きい場合、クロムでは正しく機能しません。

Chrome 19.0.1084.52 を使用しており、OS は Windows 7 です。

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_lineをテストに使用した人はいますか?

キャンバスの幅と高さを大きくすると、線が消えます。

クロムのキャンバスの最大の高さと幅はありますか?解決策はありますか?

4

4 に答える 4

2

面白い問題です！

Chrome と Firefox でテストした結果、次のことがわかりました。

  • キャンバス幅 > 32767 の場合、 Chromeは何も描画しません
  • キャンバス幅 > 32766 の場合、 Firefoxは何も描画しません

キャンバスの幅がその数値より大きい場合、何も描画されません。

なぜこのような制限があるのか​​ わかりません。ブラウザのソースコードから根本原因を突き止められるかも!?

次のコードは一例です。ここをクリックして実行できます。

<!DOCTYPE html>
<html>
<body>

If canvas width is greater than 32767, Chrome can't draw anything.<br>

<canvas id="myCanvas" width="32768" height="100"></canvas>

<script type="text/javascript">    
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.moveTo(10,50);
ctx.lineTo(300,50);
ctx.stroke();    
</script>

</body>
</html>
于 2012-09-21T17:48:39.067 に答える
1

幅と高さの制限があるかもしれませんが、私はそれで十分だと思います、

こちらはhttp://jsfiddle.net/AkashSaikia/4c75a/です

大きいサイズで遊んだ

そして、ここでのw3cによると、unsigned longは約0〜4,294,967,295です。

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(optional DOMString type, any... args);
  void toBlob(FileCallback? _callback, optional DOMString type, any... args);

  object? getContext(DOMString contextId, any... args);
};

しかし、一度テストすると、約0〜2147483647かかります

こちらをご覧くださいhttp://jsfiddle.net/AkashSaikia/9EWad/1/

そして、いつ、どのようにカナバスの高さと幅を変更しますか？

FIY、キャンバスの高さと幅のプロパティを変更すると、その上に描画されたものがクリアされます。

于 2012-05-24T09:56:03.073 に答える
0

私の経験では、少なくとも iOS デバイスのキャンバス レンダリングにはサイズ制限があります。これは、最近ではキャンバスが通常ハードウェア アクセラレーションされているため、GPU メモリが限られているためです。

iOS デバイスの場合、最大サイズは、256 MB 以上のメモリを搭載したデバイスの場合は 5 メガピクセル、メモリが少ないデバイスの場合は 3 メガピクセルになります。

于 2013-12-16T06:21:26.227 に答える
0

線の最大幅と高さは、使用するブラウザによって異なります。

非常に幅の広い線を描きたい場合は、長方形を描いて正しい位置に変換し、線の角度に回転させます。

于 2012-05-24T06:29:07.803 に答える