C# と VB.NET の質問掲示板

わんくま同盟

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト


■87473 / )  HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ 綾瀬さとみ (1回)-(2018/05/26(Sat) 05:57:01)

分類:[JavaScript] 

HTMLのcanvasに線を引くjsを外部から読み込んで実行したいのですが
何もcanvasに表示されません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    body {
        background-color: #000000;
    }
    canvas{
        width:500px;
        height:500px;
        border: solid 1px #ffffff;
    }
</style>

<title>てすと</title>

</head>
<body>   
    <canvas id="canvas" width="500" height="500" /><br />
    <script type="text/javascript" src="../js/test.js" />
</body>
</html>

--------------------------------------
test.js
--------------------------------------
'use strict';

function test() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  ctx.strokeStyle = '#ffffff';
  ctx.lineWidth = 1;
  ctx.beginPath();     //Pathで描画を開始する
  ctx.moveTo(0, 250);
  ctx.lineTo(canvas.clientWidth, 250);
  ctx.stroke();        //Canvas上に描画する
}

test();

また、jsをHTMLに直接書いた場合は線が引けるのですが
色味が灰色っぽく真っ白になりません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    body {
        background-color: #000000;
    }
    canvas{
        width:500px;
        height:500px;
        border: solid 1px #ffffff;
    }
</style>

<title>てすと</title>

</head>
<body>   
    <canvas id="canvas" width="500" height="500" /><br />
    <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
    
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 1;
            ctx.beginPath();     //Pathで描画を開始する
            ctx.moveTo(0, 250);
            ctx.lineTo(canvas.clientWidth, 250);
            ctx.stroke();        //Canvas上に描画する
    </script>
</body>
</html>

自分なりに調べてみたのですが
どうしたらよいかわかりません。
宜しければ教えていただければ幸いです。

返信 編集キー/


管理者用

- Child Tree -