即時関数で囲むと onload が実行できない・・・

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5    <meta charset="utf-8" />
6    <title>canvas</title>
7    <meta name="description" content="" />
8    <!-- <script>
9    (function(){
10        var ctx;
11        function init(){
12            var canvas = document.getElementById("canvas");
13            ctx = canvas.getContext("2d");
14            ctx.strokeStyle = "#FF0000";
15            ctx.fillstyle = "#00FF00";
16            ctx.lineWidth = 10;
17            ctx.lineCap = "round";
18            ctx.shadowColor = "#000000";
19            ctx.shadowBlur = 20;
20
21            // 線を引く
22            ctx.beginPath();
23            ctx.moveTo(100, 100);
24            ctx.lineTo(300, 150);
25            ctx.stroke();
26
27            // 短形を描く
28            ctx.fillRect(100, 200, 200, 100);
29            ctx.strokeRect(100, 200, 200, 100);
30        }
31    })();
32    </script> -->
33</head>
34<body onload="init()">
35    <canvas id="canvas" width="600" height="400"></canvas>
36    <script src="../javascript/canvas.js"></script>
37</body>
38</html>

canvas.jsの中身はhead内のscriptと同じです。
即時関数を外したら普通に実行できますが、即時関数で囲んでいると、onload="init()"の部分からエラーメッセージCan't find variable: initがでます。
即時関数で囲んだのが原因だというのはわかりますが、囲んだまま、onloadを実行したいです。どうすればいいですか?
即時関数は外したくないです。

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

回答1件

ベストアンサー

即時関数の中から、document.body.onload = init;のようにイベントを登録してください。

投稿2015/11/18 02:17

maisumakun

総合スコア145184

退会済みユーザー

2015/11/18 02:26 編集

ありがとうございます。助かりました。初歩的な質問で申し訳ないのですが、document.body.onload = init; はfunction init()より前に書くのですか、それとも、function init() の後に書くのですか?両方実行できましたが・・・ document.body.onload = init; の init の後の () は別になくても構わないのですか? 引数を取る場合のみ必要なのですか?

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