0
を使用して三角形のパターンを生成します。は、私は以下のような三角形のものを生成したい二つの異なるシンボル
a (1px)
bb (2px)
aaa (3px)
bbbb (4px)
しかし、私は2つのシンボルが異なるサイズを持っている場合、それは三角形ではないだろうことがわかりました。たとえば、結果は次のようになります。
<html>
<body>
<script type="text/javascript">
<!--
window.alert("Hello! This website draws a triangular pattern.");
var height; //the height of the triangular pattern
var first; //the first symbol that forms the triangle
var second; //the second symbol that forms the triangle
var display;
height = window.prompt("What is the height of the triangular pattern?")
first = window.prompt("Please enter a symbol to generate the triangular pattern:")
second = window.prompt("Please enter another symbol to generate the triangular pattern:")
h = parseInt(height);
var i, j;
for (i = 1; i <= h; i++) {
display = "<p style = \"font-size: " + i + "ex\">";
for (j = 1; j <= i; j++) {
if (i % 2 > 0)
display += first;
if (i % 2 <= 0)
display += second;
}
display += "</p>";
document.write(display);
}
//-->
</script>
</body>
</html>これはオンラインで見つける運動ですが、私は、ソースを忘れてしまった：ここ
口
xx
口口口
xxxx
単に最初の行の合計はに PXを使用した場合、第2のラインは、シンボルのサイズを無視し、2A PXを使用する必要がある、と言っ。
これをどうすればいいのか知りたいです。下の画像のように。
私は、シンボルの大きさがほぼ同じであれば、私はしぶしぶ形状を生成するためにそれは大丈夫だと思います。大きな問題がなければ上記のコードを変更しなくてもいいと思っていますので、私の努力の一部を見せたいと思っています。
私のコードのようなものを取得するコードの下
にforループ内の最初の文を変更します。 – recipelee
問題を解決するためにできることを簡単に追加する必要があることを知りたい。 – recipelee
これを行う簡単な方法はありません。 ['CanvasRenderingContext2D']（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D）を作成し、[' measureText']（https：//developer.mozilla）を使用してください。 org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText）メソッドを呼び出すか、['getBoundingClientRect']（https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect）を呼び出します文字の大きさを把握するために各文字のうちの1つだけを含む2行がありますが、これはDOM APIの高度な使い方です。 – Xufox