javascriptの実行についてなのですが，alart以外の機能（円を描くなど）を実行したい場合は，どのようにしたら良いのでしょうか．

前提・実現したいこと

javascriptでグラフィックを描く以下のソースコードをweb上で実行したいのですが，javascriptとhtmlをリンクさせる方法がわかりません．　開発環境はmacです．

該当のソースコード

javascript ファイル名　a.js

var positionX;
var positionY;
var velocityX;
var velocityY;
var hitSound;

function preload() {
  hitSound = loadSound('hit.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  positionX = width / 2;
  positionY = height / 2;
  velocityX = 15;
  velocityY = 10;
}

function draw() {
  background(0, 25);
  noStroke();
  fill(positionX / 2, positionY / 2, 0);
  ellipse(positionX, positionY, 80);

  positionX += velocityX;
  if (positionX > width - 40) {
    velocityX *= -1;
    hitSound.play();
  }
  if (positionX < 40) {
    velocityX *= -1;
    hitSound.play();
  }

  positionY += velocityY;
  if (positionY > height - 40) {
    velocityY *= -1;
    hitSound.play();
  }
  if (positionY < 40) {
    velocityY *= -1;
    hitSound.play();
  }
}

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>aaa</title>
  </head>
  <body>
    <script src="a.js"></script>
  </body>
</html>

試したこと

javascriptをweb上で実行する方法をもとに，上記のjavascriptファイルと同フォルダ内にあるhtmlのファイルに <script src="a.js"></script>と書きましたが何も反応がありません．
javascriptのコードがalert("ようこそ！");の場合は実行できました．

m.ts10806

2019/04/09 13:37

えっと。目的がよくわかりません。タイトルですべて語るのではなく、きちんと質問本文で要件を説明してください。調べたこと・試したことは必須です。

Res

2019/04/09 13:37

題名だけでなく、内容も変更してください。これでは誰も答えられません。

Res

2019/04/09 13:38

内容がテンプレートのままです。

Res

2019/04/09 13:57

補足情報は削除してもいいと思います。発生している問題・エラーメッセージもいいと思いますが...

行動規範の内容に同意します

回答4件

JavaScriptとCanvasを使って円を描くできるだけシンプルなサンプルを書いてみました。プログラムを学び始めは、できるだけ単純なものの方が理解しやすいと思います。

HTML
1<body>
2<canvas id="canvas1" width="200" height="200"></canvas>
3<script>
4  var canvas = document.getElementById('canvas1');
5  var context = canvas.getContext('2d');
6  context.beginPath();
7  // 座標(80, 80)に半径60の円を描画
8  context.arc(80, 80, 60, 0, Math.PI * 2, false);
9  context.stroke();
10</script>
11</body>

投稿2019/04/10 01:16

ockeghem

総合スコア11701

ベストアンサー

関数は用意するだけではなく呼び出してください。
どのタイミングでどう呼び出したら想定通り動くのかは用意されたご自身が承知かと思いますが…

関数の入門案件ですよ。

下記のように.jsファイルに書いて

js
1function hoge(){
2  alert(1);
3}
4function fuga(){
5  alert(2);
6}

htmlにリンクさせても

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>aaa</title>
6  </head>
7  <body>
8    <script src="a.js"></script>
9  </body>
10</html>

何も出ません。
用意したものをどこかで呼び出す必要があります。

呼び出し例１：

js
1function hoge(){
2  alert(1);
3}
4function fuga(){
5  alert(2);
6}
7hoge();
8fuga();

呼び出し例２：※.jsの中身は最初のまま

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>aaa</title>
6  </head>
7  <body>
8    <script src="a.js"></script>
9    <script>
10    hoge();
11    fuga();
12    </script>
13  </body>
14</html>

関数 - JavaScript | MDN

関数を呼び出すセクション

関数を定義しても、その関数が実行されるわけではありません。関数の定義とは、ただ単に関数に名前をつけ、その関数が呼び出されたときに何をするかを指定することです。関数の呼び出しは、実際に指定したパラメータを用いて指定された動作を実行するということです。

投稿2019/04/09 20:54

編集2019/04/10 08:18

m.ts10806

総合スコア80842

gyjgsdyg

2019/04/11 06:45

自分のjavascriptのコードで実行したい場合は，　<body> <script src="a.js"></script> <script> setup(); draw(); </script> </body> で実行できるということでしょうか．

m.ts10806

2019/04/11 06:51

まず、やってみてから。「できます！」と言っても結局実行して確かめるのは他でもない作ったあなたです。あと、想定通り動くかどうかも別問題です。

gyjgsdyg

2019/04/11 06:59

できませんでした！

m.ts10806

2019/04/11 07:02 編集

「想定通りできなかった」のか「関数が呼び出せていない」のかどちらでしょうか。デバッグしてください。 https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

gyjgsdyg

2019/04/11 07:05

関数が呼び出せず白紙のままでした．

m.ts10806

2019/04/11 07:06

白紙とは？デバッグはしたんですよね？「呼び出せてない」ならコンソールにエラーが出ているはずです。

m.ts10806

2019/04/11 07:10

どこから持ってきたんですか？このコード。自身で書いたわけじゃないですよね？自身で書いたわけでないのでしたら出典明示してください。今私は「自分で書いたコードなのになぜ理解してないの？」という状態です。ざっと調べた限り、関数は呼び出せます。ただ、必要な機能が足りてないだけです。そこはデバッグしたうえで調べてください。すぐ出てきます。

gyjgsdyg

2019/04/11 07:25

初心者で理解不足で申し訳ございません．コンソールには Uncaught ReferenceError: createCanvas is not defined at setup (a.js:7) at index.html:8 とでてきました．自分の書いたコードではCreateCanvasは定義できないのでしょうか．

m.ts10806

2019/04/11 07:31

違います。エラーとしては「関数が未定義」ということだけですが、既に次のコメントで書いてますように、CreateCanvas()を含むプラグインが今回のコードに紐付けられていないからです。参考にした記事に何か補足ありませんでしたか？

行動規範の内容に同意します

古典か？

html
1<div id="hoge"></div>

javascript
1const
2  r = 200,
3  cx = 300,
4  cy = 300,
5  k = Math.PI / 180,
6  f = document.createDocumentFragment(),
7  s = document.createElement ('span');
8
9s.style.cssText = 'position: absolute; background: red; width:1px; height: 1px;';
10
11for (let i = 0; i < 360; i += .25) {
12  let c = f.appendChild (s.cloneNode (false)).style;
13  c.left = (cx + (Math.cos (k * i) * r)+.5 |0) + 'px';
14  c.top  = (cy - (Math.sin (k * i) * r)+.5 |0) + 'px';
15}
16document.querySelector ('#hoge').appendChild (f);
17

投稿2019/04/10 01:36

退会済みユーザー

総合スコア0

外部jsをつかって円を描画

my.html

HTML
1<html>
2<head>
3<script src="my.js"></script>
4</head>
5<body>
6<div id="hoge"></div>
7</body>
8</html>

my.js

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var svg= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
3  svg.setAttribute('width',100);
4  svg.setAttribute('height',100);
5  var c=document.createElementNS('http://www.w3.org/2000/svg', "circle");
6  c.setAttributeNS(null,"cx","50");
7  c.setAttributeNS(null,"cy","50");
8  c.setAttributeNS(null,"r","49");
9  c.setAttributeNS(null,"stroke","black");
10  c.setAttributeNS(null,"fill","orange");
11  svg.appendChild(c);
12  document.querySelector('#hoge').appendChild(svg);
13});