1

JavaScript初心者です。

本で勉強中に下記の練習用コードがあったのですが、『縁取りした三角形が描画される』と記載されているにも関わらず、どのブラウザでも下図のように三角形が黒く塗りつぶされて描画されてしまいます。
私が入力したものではなく、書籍添付のサンプルコードでその現象が起こるので、本で記載されている内容が古いのか、間違いなのか、描画結果が正しくて単なる本の誤植なのか、もっと他に原因があるのかがわかりません。

どなたかお時間がある方、コードに間違いがあればご指摘お願いします。
できれば、後学のため原因などを説明していただけるとより助かります。

画像の説明をここに入力

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<canvas id="testCanvasElement" width="200" height="200" style="background: #ffff00;"></canvas>

<script>

    var cv = document.getElementById("testCanvasElement");
    var context = cv.getContext("2d");

    // パス開始
    context.beginPath();

    // 三角形のパスを設定
    context.moveTo(0, 0);
    context.lineTo(100, 50);
    context.lineTo(0, 100);

    // パスを閉じる
    context.closePath();

    // 塗りつぶしスタイルを設定
    context.fillStyle = "#ffffff;";

    // パスの中を塗りつぶす
    context.fill();

    // 線スタイルを設定
    context.strokeStyle = "#0000ff;";

    // パスに沿って線を引く
    context.stroke();


</script>

</body>
</html>
2
  • 仮に、参考にしている書籍に誤植があった場合、(特に)技術書の場合は出版社のホームページなどで正誤表が公開されている場合があるため、まずはこれらを確認してみるのもよいと思います。 / 併せて、質問の本文にも具体的な書籍名を含めておくと回答のヒントになると思います。
    – cubick
    Commented 2020年3月17日 0:52
  • ご回答ありがとうございます。書籍名は良い内容のことではないので、明記していいものかと思って書きませんでした。正誤表はありませんでしたが、確かに出版社のHPや著者のHPに直接聞くと回答をもらえたとは思います。しかし、こちらで尋ねたほうが早いと思いましたし、不特定多数の客観的意見を聞けるかと思って今回はそうさせていただきました。貴重な時間をさいていただき。重ねてお礼を申し上げます。
    – 山田桃
    Commented 2020年3月17日 6:13

1 件の回答 1

1

少しばかりの誤植があるようです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<canvas id="testCanvasElement" width="200" height="200" style="background: #ffff00;"></canvas>

<script>

    var cv = document.getElementById("testCanvasElement");
    var context = cv.getContext("2d");

    // パス開始
    context.beginPath();

    // 三角形のパスを設定
    context.moveTo(0, 0);
    context.lineTo(100, 50);
    context.lineTo(0, 100);

    // パスを閉じる
    context.closePath();

    // 塗りつぶしスタイルを設定
    context.fillStyle = "#ffffff"; //""内に;は不要

    // パスの中を塗りつぶす
    context.fill();

    // 線スタイルを設定
    context.strokeStyle = "#0000ff"; //""内に;は不要

    // パスに沿って線を引く
    context.stroke();


</script>

</body>
</html>

fillStylestrokeStyleで色指定をする場合にはCSSの色要素として有効な文字列を指定しますが、それにはセミコロン(;)は含まれません。

もしかしたら世の中に存在するありとあらゆるブラウザを試せばそのような余分な文字を無視してくれるものがあるかもしれませんが、手元のSafari, Firefox, Chromeではそのような動作にはなりませんでした。不正な文字列と言うことで、塗り潰しも輪郭線もデフォルトの黒で描画されてしまうようです。

書籍にも検索トップに出てくる有名サイトにもそう言った間違いが入ることはあり得ます。公式のリファレンスの記述なども参考にして見直してみると、自分でそこら辺を見つけられるかもしれません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。