63912


JavaScript初心者です。

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/s8974.png)](https://i.stack.imgur.com/s8974.png)

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2020-03-16T16:05:26.327
63911
2020-03-16T16:57:45.363
38234
question
javascript
Canvasでの図形描画、path機能についての質問


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

[code]

    <!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>
[/code]

[`fillStyle`や`strokeStyle`で色指定をする](https://developer.mozilla.org/en-
US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)場合にはCSSの色要素として有効な文字列を指定しますが、それにはセミコロン(;)は含まれません。

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

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


CC BY-SA 4.0
2020-03-16T16:57:45.363
63912
2020-03-16T16:57:45.363
13972
63911
answer