Question

我们已经创建了一个带有函数的脚本，我试图用window.onload调用它。该脚本的目的是在页面加载时使用几个图像填充画布。这适用于Firefox，Internet Explorer和Safari，但不适用于Google Chrome。我们已经尝试使用谷歌搜索但尚未找到一个，所以我们希望你们中的任何人都能帮助我们？！

这是HTML和Javascript代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Opdracht 2</title>

    <link rel='stylesheet' type='text/css' href='css/canvasopdracht2.css'>
</head>

<body>
    <!-- <img id="logo" height='100px'><br> -->
    <canvas id='canvas2' width='1900' height='1000'>
        Your browser does not support the HTML5 canvas tag.
    </canvas>

</body>
    <script src="js/addlistener.js"></script>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script> <!-- EaselJS inladen -->
    <script src="js/canvasopdracht2.js"></script>
</html>

// JAVASCRIPT

window.onload = time2paint;

var stage = new createjs.Stage("canvas2");
var canvasPositionsX=[]; //array
var canvasPositionsY=[]; //array
var canvasPositions=[]; //array
var genPositionX=-50; var genPositionY=-50;
var Position = 0;
var usedPositions = []; //array
var finalPositions;
var randomPosition = [];
var singlePosition = [];

var SplitRandomUsedPosition;
var randomUsedPosition;

var attachedPositionX1;
var attachedPositionX2;
var attachedPositionY1;
var attachedPositionY2;
var attachedPositions=[];

function time2paint(event){
  var canvasWidth = 1900; var canvasHeight = 1000;
  var statistics = 10;

  //generate x positions
  for(s=1; s<=(canvasWidth/50); s++){
    genPositionX=genPositionX + 50;
    canvasPositionsX.push(genPositionX);
  }
  //generate y positions
  for(s=1; s<=(canvasHeight/50); s++){
    genPositionY=genPositionY + 50;
    canvasPositionsY.push(genPositionY);
  }
  //generate a grid (array)
  //combine generated y and x positions, and put them all in the canvasPositions array together
  //voor elke x coordinate worden alle y coordinaten toegevoegd in een 2e for loop
  for(i=0; i<canvasPositionsX.length; i++){
    for(s=0; s<canvasPositionsY.length; s++){
      Position = canvasPositionsX[i] + " " + canvasPositionsY[s];
      canvasPositions.push(Position);
    } 
  }
   //get coordinates relative to client window
  var inx = event.clientX; 
  var iny = event.clientY; 
  //get offset of the element, relative to client window
  var minx = getOffset( document.getElementById('canvas2') ).left; 
  var miny = getOffset( document.getElementById('canvas2') ).top; 

    for(i=1; i<=statistics; i++){
      //get final coordinates, relative to element window
      var x = inx - minx;
      var y = iny - miny;

      //create image (50x50 afbeelding)
      var image = new createjs.Bitmap("images/plaatje (" + i + ").jpg");
      image.scaleX=0.25; //50px
      image.scaleY=0.25; //50px

      //als image 1 .. 
      if(i == 1){
        //get center 
        image.x = canvasWidth / 2; 
        image.y = canvasHeight / 2;
        //push first image coordinates in usedpositions
        usedPositions.push(image.x + " " + image.y);
      //als andere image .. 
      }else{
        //get random usedposition
        randomUsedPosition = usedPositions[Math.floor(Math.random() * usedPositions.length)];
        SplitRandomUsedPosition = randomUsedPosition.split(" "); // split by space - [0] is x - [1] is y

        //voeg 50px x OF 50px y toe (+ bij elkaar voegen)
        attachedPositionX1 = (parseInt(SplitRandomUsedPosition[0]) + 50) + " " + parseInt(SplitRandomUsedPosition[1]);
        attachedPositionX2 = (parseInt(SplitRandomUsedPosition[0]) - 50) + " " + parseInt(SplitRandomUsedPosition[1]);
        attachedPositionY1 = parseInt(SplitRandomUsedPosition[0]) + " " + (parseInt(SplitRandomUsedPosition[1]) + 50);
        attachedPositionY2 = parseInt(SplitRandomUsedPosition[0]) + " " + (parseInt(SplitRandomUsedPosition[1]) - 50);
        attachedPositions = [attachedPositionX1, attachedPositionX2, attachedPositionY1, attachedPositionY2];
        //random choose where to attach
        randomPosition = attachedPositions[Math.floor((Math.random() * attachedPositions.length))];

        //if random position al wordt gebruikt get nieuwe random coordinates from canvaspositions array
        while(usedPositions.indexOf(randomPosition) > -1){
        randomUsedPosition = usedPositions[Math.floor(Math.random() * usedPositions.length)];
        SplitRandomUsedPosition = randomUsedPosition.split(" "); // split by space - [0] is x - [1] is y

        //voeg 50px x OF 50px y toe (+ bij elkaar voegen)
        attachedPositionX1 = (parseInt(SplitRandomUsedPosition[0]) + 50) + " " + parseInt(SplitRandomUsedPosition[1]);
        attachedPositionX2 = (parseInt(SplitRandomUsedPosition[0]) - 50) + " " + parseInt(SplitRandomUsedPosition[1]);
        attachedPositionY1 = parseInt(SplitRandomUsedPosition[0]) + " " + (parseInt(SplitRandomUsedPosition[1]) + 50);
        attachedPositionY2 = parseInt(SplitRandomUsedPosition[0]) + " " + (parseInt(SplitRandomUsedPosition[1]) - 50);
        attachedPositions = [attachedPositionX1, attachedPositionX2, attachedPositionY1, attachedPositionY2];
        //random choose where to attach
        randomPosition = attachedPositions[Math.floor((Math.random() * attachedPositions.length))];
         }

        //push chosen position in usedPositions array and save final image positions
        usedPositions.push(randomPosition);
        finalPositions = randomPosition.split(" "); 

        //draw image
        image.x = finalPositions[0]; 
        image.y = finalPositions[1]; 
      }

   //add fade-in jquery effects

        stage.addChild(image);
        stage.update(); //update draws to the canvas
    }  

        console.log(usedPositions);  
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

Window.onload函数在chrome中不起作用？

0 个答案: