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

わんくま同盟

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

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

ツリー一括表示

HTMLのCanvasに外部jsファイルを読み込んで線を引く /綾瀬さとみ (18/05/26(Sat) 05:57) #87473
Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /WebSurfer (18/05/26(Sat) 08:47) #87474
Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /WebSurfer (18/05/26(Sat) 09:21) #87475
│└ Re[2]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /綾瀬さとみ (18/05/29(Tue) 08:56) #87488
Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /魔界の仮面弁士 (18/05/29(Tue) 10:06) #87493
    └ Re[3]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /MTK (18/05/29(Tue) 09:26) #87489
      └ Re[4]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /にゃるら (18/05/29(Tue) 10:02) #87491
        └ Re[5]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /にゃるら (18/05/29(Tue) 10:05) #87492
          └ Re[6]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /綾瀬さとみ (18/05/30(Wed) 01:02) #87515
            ├ Re[7]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /にゃるら (18/05/30(Wed) 09:39) #87517
            └ Re[7]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /魔界の仮面弁士 (18/05/30(Wed) 10:10) #87518
              └ Re[8]: HTMLのCanvasに外部jsファイルを読み込んで線を引く /綾瀬さとみ (18/06/03(Sun) 06:13) #87534 解決済み


親記事 / ▼[ 87474 ] ▼[ 87475 ] ▼[ 87493 ]
■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>

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

[ □ Tree ] 返信 編集キー/

▲[ 87473 ] / 返信無し
■87474 / 1階層)  Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ WebSurfer (1501回)-(2018/05/26(Sat) 08:47:06)
No87473 (綾瀬さとみ さん) に返信

外部ファイルの JavaScript の test メソッドが実行されないからでは?

> function test() {

上記のところを、

window.onload = function test( ) {

としてみたらどうなりますか?
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87473 ] / ▼[ 87488 ]
■87475 / 1階層)  Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ WebSurfer (1502回)-(2018/05/26(Sat) 09:21:08)
No87473 (綾瀬さとみ さん) に返信

【追伸】

html ソース、JavaScript ソースを修正して試す祭は、
その前にブラウザのキャッシュを消去するのを忘れないよ
うにしてください。

そんなことは言われなくても知っていて、余計なお世話 で
したら失礼しました。
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87475 ] / ▼[ 87489 ]
■87488 / 2階層)  Re[2]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ 綾瀬さとみ (2回)-(2018/05/29(Tue) 08:56:32)
No87475 (WebSurfer さん) に返信

ご連絡ありがとうございます。
実際に試してみましたが変化ありませんでした。

> ■No87473 (綾瀬さとみ さん) に返信
>
> 【追伸】
>
> html ソース、JavaScript ソースを修正して試す祭は、
> その前にブラウザのキャッシュを消去するのを忘れないよ
> うにしてください。
>
> そんなことは言われなくても知っていて、余計なお世話 で
> したら失礼しました。
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87473 ] / 返信無し
■87493 / 1階層)  Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ 魔界の仮面弁士 (1691回)-(2018/05/29(Tue) 10:06:07)
No87473 (綾瀬さとみ さん) に返信
> HTMLのcanvasに線を引くjsを外部から読み込んで実行したいのですが
> 何もcanvasに表示されません。

どのブラウザーでテストしているのかが示されていませんが、
多くの場合、
 <script type="text/javascript" src="../js/test.js" />
ではなく、
 <script type="text/javascript" src="../js/test.js"></script>
にしないと、正しく閉じられたと見做されません。

同様の理由で、<canvas /> も <canvas></canvas> にすべきです。
もちろん </br> は NG ですが。


> 色味が灰色っぽく真っ白になりません。

アンチエイリアスのせいでしょう。

幅 1 の水平線線を y = 50 の位置に描いた場合、
y = 50〜51 や y = 49〜50 の位置に描かれるのではなく、
y = 49.5〜50.5 の位置に描かれたと記憶しています。

事前に
 ctx.translate(0.5, 0.5);
をいれて、半ピクセル分シフトしておくか、あるいは
lineWidth を 1 から 3 などに増やしてみるとどうでしょう。
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87488 ] / ▼[ 87491 ]
■87489 / 3階層)  Re[3]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ MTK (65回)-(2018/05/29(Tue) 09:26:02)
No87488 (綾瀬さとみ さん) に返信


> <script type="text/javascript" src="../js/test.js" />


この後に </script> が抜けているからだと思います。
こちらで試してみたところ表示されました。
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87489 ] / ▼[ 87492 ]
■87491 / 4階層)  Re[4]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ にゃるら (17回)-(2018/05/29(Tue) 10:02:24)
No87489 (MTK さん) に返信
> ■No87488 (綾瀬さとみ さん) に返信
> 
> 
>><script type="text/javascript" src="../js/test.js" />
> 
> 
> この後に </script> が抜けているからだと思います。
> こちらで試してみたところ表示されました。


Firefox でデバッグしたら、

  <script type="text/javascript" src="../js/test.js" />

が

  <script type="text/javascript" src="..\js\test.js"></body></html></script>

って感じになりました。(わたしくしはjavascriptわかりませんが、そういったものなのかな?)

MTKさんのいうように

  <script type="text/javascript" src="../js/test.js" />

を

  <script type="text/javascript" src="../js/test.js" ></script>

にしたら、キャンバスの真ん中に線が引かれましたよ。

[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87491 ] / ▼[ 87515 ]
■87492 / 5階層)  Re[5]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ にゃるら (19回)-(2018/05/29(Tue) 10:05:57)
編集キー忘れたので

No87491 (にゃるら さん) に返信

> <script type="text/javascript" src="..\js\test.js"></body></html></script>

<script type="text/javascript" src="../js/test.js"></body></html></script>

ですね。すみません。

[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87492 ] / ▼[ 87517 ] ▼[ 87518 ]
■87515 / 6階層)  Re[6]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ 綾瀬さとみ (3回)-(2018/05/30(Wed) 01:02:47)
皆様、ご返信いただきありがとうございます。

</script>

に直してみましたところ、正常に動作しました。
また、

</canvas>

についても同様です。
ありがとうございます。

ただ、色味の問題がありまして
Chrome と Firefox で試してみたのですが
同じように灰色に近くなってしまいます。
canvas に三角形や文字を描いてみたのですが
それは真っ白に表示されるのですが
何で、直線だけ黒味がかってしまうのかがわかりません。
ご存知の方、いらっしゃいましたら
教えていただけましたら嬉しいです。
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87515 ] / 返信無し
■87517 / 7階層)  Re[7]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ にゃるら (22回)-(2018/05/30(Wed) 09:39:53)
No87515 (綾瀬さとみ さん) に返信
> ただ、色味の問題がありまして
> Chrome と Firefox で試してみたのですが
> 同じように灰色に近くなってしまいます。

当方、Firefoxですが、線の画素すべて確認してないけど、白で描画されているように見えます。
錯覚とかはないですか?
もしくは奇数でなく偶数の太さにしてみるとか検討されてはいかがでしょう?

<!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/></canvas>
    <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.translate(0.5, 0.5);   // ★87496  魔界の仮面弁士さんのアドバイス部分
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 1;
            ctx.beginPath();     //Pathで描画を開始する
            ctx.moveTo(0, 250);
            ctx.lineTo(canvas.clientWidth, 250);
            ctx.stroke();        //Canvas上に描画する
    </script>
</body>
</html>

[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87515 ] / ▼[ 87534 ]
■87518 / 7階層)  Re[7]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ 魔界の仮面弁士 (1698回)-(2018/05/30(Wed) 10:10:04)
2018/05/30(Wed) 10:10:22 編集(投稿者)

No87515 (綾瀬さとみ さん) に返信
> canvas に三角形や文字を描いてみたのですが
> それは真っ白に表示されるのですが
> 何で、直線だけ黒味がかってしまうのかがわかりません。

今は背景が黒なのですよね。
背景を青にすると、青みがかった感じになりませんか?

この辺、css の image-rendering: pixelated; 等や、
ctx.何某imageSmoothingEnabled = false;
あたりで制御できればよいのですが、それで解決するものでは無いようで。


サブピクセルレンダリングを避けるには、先に述べたように、
半ピクセル分の補正が必要のようです。(経験則的なものなので、仕様面については調査していません)
https://www.rgraph.net/canvas/docs/howto-get-crisp-lines-with-no-antialias.html

ただし厄介なことに、fillRect 等でこれを行うと、逆に縁がぼやけるので、
描画メソッドに応じて、半ピクセルの補正と復元を行う必要があったり、
Retina 対応の場合はスケーリングにも考慮が必要だったり…。
https://www.yoheim.net/blog.php?q=20121005
[ 親 87473 / □ Tree ] 返信 編集キー/

▲[ 87518 ] / 返信無し
■87534 / 8階層)  Re[8]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
□投稿者/ 綾瀬さとみ (4回)-(2018/06/03(Sun) 06:13:41)
おはようございます。

translate(0.5,0.5)

の方でうまくいきました。
これからもよろしくお願いいたします。


解決済み
[ 親 87473 / □ Tree ] 返信 編集キー/


管理者用

- Child Tree -