单独 div 中的多个 onload 函数答案

【问题标题】：Multiple onload functions in separate divs单独 div 中的多个 onload 函数
【发布时间】：2014-11-06 16:35:10
【问题描述】：

目前在 HTML5 画布课程中，我正在努力保持它的美观和整洁，但我对 JS 不是超级精通，我已经掌握了基础知识，而且我看到其他一些人也有同样的问题，但我无法让这些解决方案为我工作。所以我希望有人可以解释使用 eventListener ，因为它适用于我的情况。注意：它跳过了第 3 部分和第 4 部分，因为我还没有弄清楚它们，我应该画一个 5 点开始和一把雨伞......呃！！

/*********************************************

第 1 部分

从点 (0 ,0) 开始画一个矩形宽度为 50 像素，高度为 100 像素将矩形的颜色设置为蓝色阴影。将描边颜色设置为黑色，描边的尺寸与矩形相同。

提醒 - 先设置样式再绘制。

********************************************** /

//在这里画矩形

window.onload = function(){
            var myCanvas1 = document.getElementById("Canvas1");

            if(myCanvas1){
                //get context
                var ctx = myCanvas1.getContext("2d");

                if(ctx){
                    ctx.strokeStyle = "black";
                    ctx.fillStyle = "#6363db";
                    ctx.lineWidth =5;

                    ctx.strokeRect(0, 0, 50, 100);
                    ctx.fillRect(0, 0, 50, 100);

                }

            }

        }

/*********************************************

第 2 部分

从点 (50 ,50) 开始画一个圆半径为 20 px 将圆圈的颜色设置为红色阴影并将 alpha 设置为 0.5 将描边颜色设置为黑色，并为该圆使用 30px 的半径。

提醒 - 先设置样式，然后绘制。使用圆弧法

********************************************** /

//在这里画圆

window.onload = function(){
            var myCanvas2 = document.getElementById("Canvas2");

            if (myCanvas2 && myCanvas2.getContext){
                var ctx = myCanvas2.getContext("2d");
                if (ctx){

                    ctx.strokeStyle = "black";
                    ctx.fillStyle = "rgba(204, 68, 68, 0.79)";
                    ctx.lineWidth =5;

                    var degrees = 360;
                    var radians = (degrees/180)*Math.PI;

                    ctx.beginPath();
                    //arc = (x, y, r, sA, eA, Clock/Counter)
                    ctx.arc(50, 50, 30, 0, radians);
                    ctx.fill();
                    ctx.stroke();


            }              
        }
}

/*********************************************

第 5 部分

练习使用文本。在画布中绘制文本。它可以用任何颜色说出你想说的话。

********************************************** /

//在这里画文字

window.onload = function(){
            var myCanvas5 = document.getElementById("Canvas5");

            if (myCanvas5 && myCanvas5.getContext){
                var ctx = myCanvas5.getContext("2d");
                if (ctx){

                    var myString = "HELLO WORLD!!";  

                    ctx.font = "12pt Helvetica";
                    ctx.fillStyle = "rgba(0, 157, 255, 0.79)";
                    ctx.fillText(myString, 25, 75);
                }
            }
        }

/***************************

简单的 HTML 内容

****************************/

<body>
    <div id="container">
        <h1>HTML5 Canvas Drawing</h1>
<!-- PART 1

Draw a rectangle starting at point (0 ,0)
That has a width of 50 px and a height of 100px
Set the color of the rectangle to a shade of blue.
Set the stroke color to black and the dimension of the stroke are the same as the rectangle.

Reminder - set the style first then draw.-->
            <div id="part1">
                <h2>Part 1</h2>
                    <canvas id="Canvas1">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>
            </div>
<!-- PART 2

Draw a circle starting at point (50 ,50)
That has a radius of 20 px 
Set the color of the circle to a shade of red and set the alpha to .5
Set the stroke color to black and use a radius of 30px for this circle.

Reminder - set the style first then draw.
Use the arc method-->

            <div id="part2">
                <h2>Part 2</h2>
                    <canvas id="Canvas2">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>
            </div>

<!-- PART 3

Practice using Path drawing.
Create a 5-point star shaped pattern using the lineTo method.
Begin this shape at (100, 100)

Height and width and color are up to you.-->

            <div id="part3">
                <h2>Part 3</h2>
                    <canvas id="Canvas3">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>

            </div>
<!-- PART 4

Practice drawing with Bezier curves.
Try drawing the top to an umbrella.
This should have one large arc (a half circle) on the top and scalloped edges on the bottom.

Position, height, width and color are your choice.
Do not overlap any other object.-->

            <div id="part4">
                <h2>Part 4</h2>
                    <canvas id="Canvas4">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>

            </div>

<!-- PART 5

Practice using text.
Draw text into your canvas.  It can said whatever you would like in any color.-->

            <div id="part5">
                <h2>Part 5</h2>
                    <canvas id="Canvas5">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>

            </div>

<!-- PART 6

Pixel manipulation.
Draw the image logo.png into the canvas in the following 3 ways.
1. The image exactly as it is.
2. Shrink the image by 50%
3. Slice a section of the logo out and draw that onto the canvas.

Reminder to use the drawImage method for all 3 of the ways.-->

            <div id="part6">
                <h2>Part 6</h2>
                    <canvas id="Canvas6">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>
                <img id="logo" src="image/logo.png" width= "3300px" height="1088px">

            </div>

<!-- PART 7

Putting it all together. 

Using a combination of all the methods. 
Create a complex scene.
You must use at least 3 different methods.-->

            <div id="part7">
                <h2>Part 7</h2>
                    <canvas id="Canvas7">
                        Sorry, your browser does not currently support HTML5 Canvas :(
                    </canvas>

            </div>
    </div>
<script src="js/main.js"></script>
<script src="includes/modernizr.js"></script>

</body>
</html>

【问题讨论】：

too long, didn't read.
SO 不是来做作业的。去问问你的老师，这就是他的报酬。
我只需要了解如何使用 addEventListener 而不是使用 window.onload，因为显然您添加的每个 onload 都会被下一个覆盖。这是一个在线课程，响应速度很慢，但感谢您的帮助。
window对象是一个单例全局对象，你的代码中应该只有一个onload事件处理函数，尝试在window.onload函数中一个接一个地添加所有canvas的东西。
嗯，canvas相关的函数应该都是同步的，所以只要加上“window.onload = function() { //draw canvas 1 code ... // draw canvas 5 code }”一个一个接一个

标签： javascript html canvas html5-canvas

【解决方案1】：

你的意思是像这样画一个矩形等吗？

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

【讨论】：

这就是问题所在，我可以很容易地做到这一点，只需在 HTML 文件中的每个 DIV 中添加每个脚本，但是我提供了一个外部 JS 文件来使用，我不知道如何将每一个推入各自的 DIV。

【解决方案2】：

window.addEventListener("load",functioname(),false)应该基本一样。编辑：只需“加载”.addEventListener。

【讨论】：