第一個問題:
onload()方法並非只能在body標簽中調用的,還可以在js中用window.onload = function() {函數名};來調用;另外img等標簽也支持onload方法。
支持onload方法的標簽有:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
window.onload = function(){drawRed()};
<img id="img1" src="src/img1.jpg" onload="changeImg()"></img>
第二個問題:
同時調用多個方法時,可以在body中使用<body onload="函數名1;函數名2;函數名3;......">的方式:
<body onload="drawBlack();drawRed()">
舉例說明一下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5畫布</title>
<!--利用js在畫布上繪制圖案-->
<script type="text/javascript">
function drawRed() {
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
function drawBlack() {
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#000000";
cxt.beginPath();
cxt.arc(170, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
function changeImg() {
document.getElementById("img1").src = "src/bg.jpg";
}
// onload()方法的調用方式之一
window.onload = function(){drawRed()}; window.onload = function(){drawBlack()}; </script>
</head>
<!--onload()方法的調用方式之二-->
<body onload="drawBlack();drawRed()">
<!--定義一塊畫布-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<img id="img1" src="src/img1.jpg" onload="changeImg();drawBlack();drawRed()"></img>
</body>
</html>
執行效果如下:

