BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

キャンバスの幅と高さの設定に関する問題点

2022-02-01 21:11:48

最近、HtmlのCanvasタグに手を入れる必要があり、勉強しました。

キャンバスは、HTML5で追加された新しいコンポーネントです。カーテンのようなもので、そこにJavaScriptでさまざまなグラフやアニメーションなどを描くことができる。

Canvasがない時代には、Flashプラグインでしか描画できず、ページはJavaScriptでFlashとやりとりする必要がありました。Canvasがあれば、もうFlashは必要なく、JavaScriptで直接描画することができます。

困ったのは、チュートリアルを少し読んで自分でハローワールドを書いたときです。次のコードを見てください。 

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</canvas>
<script>
    var oC = document.getElementById('canvas1');
    var ctx = oC.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>
</body>
</html>

上記のコードは、キャンバス上に幅と高さがそれぞれ200pxで、(0,0)から始まり(200,200)で終わる線を描きたいことを意味します。

しかし、ブラウザで描画される画像は

この画像を見てください～なぜこのように斜めになっているのでしょうか？斜めの線であるべきなのに・・・。

それから、canvasタグで幅と高さを設定する場合、いくつかのやり方とその結果があることを、少し調べて知りました。

<ブロッククオート

Canvas要素のデフォルトは幅300px、高さ150pxで、その幅と高さを設定するには、次のようにします。
方法1．
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法2：HTML5 Canvas APIを使用して操作する
1 var canvas = document.getElementById('id of the canvas you want to manipulate');
2 canvas.width = 500;
3 canvas.width = 500;

幅と高さを以下のように設定すると、Canvas要素は元のサイズから設定された幅と高さに引き伸ばされます。
方法1：CSSを使用すると引き伸ばされる
1 操作したいキャンバスの#id
2 width:1000px;
3 高さ:1000px。
4 }

また、インターラインスタイルにstyle=""が含まれている場合も、上記の例のように、ストレッチが発生します。
方法2：HTML5 Canvas APIの操作を使用する 引き延ばされることになる
1 var canvas = document.getElementById('id of the canvas you want to manipulate');
2 canvas.style.width = "1000px"。
3 canvas.style.height = "1000px"。
方法3：jqueryの$("#id").width(500)を使用し、引き伸ばします。

その他：canvasの幅と高さはパーセントで表すこともできません。

 つまり、上記の情報からわかるように、上の例のコードではキャンバスの幅と高さが引き伸ばされているため、期待される画像と矛盾しているのです。

では、キャンバスの幅と高さを正しく設定するように、コード例を書き換えてみました。 

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(0, 0);
    cxt.lineTo(200, 200);
    cxt.stroke();
</script>
</body>
</html>

結果

終了

要約

上記は、この記事のすべての内容であり、私はあなたの勉強や仕事のためのこの記事の内容は、特定の参照学習価値を持って願って、あなたが交換するメッセージを残すことができる質問がある場合は、スクリプトハウスのあなたのサポートをありがとうございました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します