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

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

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

Re[8]: HTMLのCanvasに外部jsファイルを読み込んで線を引く


(過去ログ 150 を表示中)
掲示板トップ C# と VB.NET 入門 新規作成 利用方法/規約 トピック表示 ランキング 記事検索 過去ログ

[トピック内 12 記事 (1 - 12 表示)]　 << 0 >>

■87473 / inTopicNo.1) 　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>

自分なりに調べてみたのですが
どうしたらよいかわかりません。
宜しければ教えていただければ幸いです。
引用返信 編集キー/
■87474 / inTopicNo.2) 　Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
▲▼■
□投稿者/ WebSurfer (1501回)-(2018/05/26(Sat) 08:47:06)
■No87473 (綾瀬さとみ さん) に返信

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

> function test() {

上記のところを、

window.onload = function test( ) {

としてみたらどうなりますか？
引用返信 編集キー/
■87475 / inTopicNo.3) 　Re[1]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
▲▼■
□投稿者/ WebSurfer (1502回)-(2018/05/26(Sat) 09:21:08)
■No87473 (綾瀬さとみ さん) に返信

【追伸】

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

そんなことは言われなくても知っていて、余計なお世話 で
したら失礼しました。
引用返信 編集キー/
■87488 / inTopicNo.4) 　Re[2]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
▲▼■
□投稿者/ 綾瀬さとみ (2回)-(2018/05/29(Tue) 08:56:32)
■No87475 (WebSurfer さん) に返信

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

> ■No87473 (綾瀬さとみ さん) に返信
>
> 【追伸】
>
> html ソース、JavaScript ソースを修正して試す祭は、
> その前にブラウザのキャッシュを消去するのを忘れないよ
> うにしてください。
>
> そんなことは言われなくても知っていて、余計なお世話 で
> したら失礼しました。
引用返信 編集キー/
■87489 / inTopicNo.5) 　Re[3]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
▲▼■
□投稿者/ MTK (65回)-(2018/05/29(Tue) 09:26:02)
■No87488 (綾瀬さとみ さん) に返信


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


この後に　</script>　が抜けているからだと思います。
こちらで試してみたところ表示されました。
引用返信 編集キー/
■87491 / inTopicNo.6) 　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>

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

引用返信 編集キー/
■87492 / inTopicNo.7) 　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>

ですね。すみません。
引用返信 編集キー/
■87493 / inTopicNo.8) 　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 などに増やしてみるとどうでしょう。
引用返信 編集キー/
■87515 / inTopicNo.9) 　Re[6]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
▲▼■
□投稿者/ 綾瀬さとみ (3回)-(2018/05/30(Wed) 01:02:47)
皆様、ご返信いただきありがとうございます。

</script>

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

</canvas>

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

ただ、色味の問題がありまして
Chrome と Firefox で試してみたのですが
同じように灰色に近くなってしまいます。
canvas に三角形や文字を描いてみたのですが
それは真っ白に表示されるのですが
何で、直線だけ黒味がかってしまうのかがわかりません。
ご存知の方、いらっしゃいましたら
教えていただけましたら嬉しいです。
引用返信 編集キー/
■87517 / inTopicNo.10) 　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>
引用返信 編集キー/
■87518 / inTopicNo.11) 　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
引用返信 編集キー/
■87534 / inTopicNo.12) 　Re[8]: HTMLのCanvasに外部jsファイルを読み込んで線を引く
▲▼■
□投稿者/ 綾瀬さとみ (4回)-(2018/06/03(Sun) 06:13:41)
おはようございます。

translate(0.5,0.5)

の方でうまくいきました。
これからもよろしくお願いいたします。
解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -