Question

我有一个代码，当我从PC的任何部分运行它而不将它放在服务器上它完美地工作，但当我把它放在服务器上并且我调用它时，它给了我以下错误：

未捕获的ReferenceError：未定义crearLienzo 在onload（（索引）：81）

我不明白为什么会这样。谢谢大家！

<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
    var movimientos = new Array();
    var pulsado;
    function crearLienzo() {
    var canvasDiv = document.getElementById('lienzo');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 200);
canvas.setAttribute('height', 200);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

    $('#canvas').mousedown(function(e){
      pulsado = true;
      movimientos.push([e.pageX - this.offsetLeft,
          e.pageY - this.offsetTop,
          false]);
      repinta();
    });

    $('#canvas').mousemove(function(e){
      if(pulsado){
          movimientos.push([e.pageX - this.offsetLeft,
              e.pageY - this.offsetTop,
              true]);
        repinta();
      }
    });

    $('#canvas').mouseup(function(e){
      pulsado = false;
    });

    $('#canvas').mouseleave(function(e){
      pulsado = false;
    });
    repinta();

}


    function repinta() {
        // función para dibujar en el lienzo los movimientos del ratón que hemos
        // recogido en la variable "movimientos"
         canvas.width = canvas.width; // Limpia el lienzo

  context.strokeStyle = "#0000a0";
  context.lineJoin = "round";
  context.lineWidth = 6;

  for(var i=0; i < movimientos.length; i++)
  {     
    context.beginPath();
    if(movimientos[i][2] && i){
      context.moveTo(movimientos[i-1][0], movimientos[i-1][1]);
     }else{
      context.moveTo(movimientos[i][0], movimientos[i][1]);
     }
     context.lineTo(movimientos[i][0], movimientos[i][1]);
     context.closePath();
     context.stroke();
  }
}
function convertCanvasToImage(canvas) {
       var image = new Image();
       image.src = canvas[0].toDataURL("image/png");
        alert(image);
       return image;
}
</script>
</head>
<body style="background: #eee;" onload="crearLienzo()">
<div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div>
<button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button>

</body>
</html>

Answer 1

将脚本标记放在body中以便先加载

    <html>
    <head>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

    </head>
    <body style="background: #eee;" onload="crearLienzo()">
<script type="text/javascript" >
        var movimientos = new Array();
        var pulsado;
        function crearLienzo() {
        var canvasDiv = document.getElementById('lienzo');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', 200);
    canvas.setAttribute('height', 200);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    context = canvas.getContext("2d");

        $('#canvas').mousedown(function(e){
          pulsado = true;
          movimientos.push([e.pageX - this.offsetLeft,
              e.pageY - this.offsetTop,
              false]);
          repinta();
        });

        $('#canvas').mousemove(function(e){
          if(pulsado){
              movimientos.push([e.pageX - this.offsetLeft,
                  e.pageY - this.offsetTop,
                  true]);
            repinta();
          }
        });

        $('#canvas').mouseup(function(e){
          pulsado = false;
        });

        $('#canvas').mouseleave(function(e){
          pulsado = false;
        });
        repinta();

    }


        function repinta() {
            // función para dibujar en el lienzo los movimientos del ratón que hemos
            // recogido en la variable "movimientos"
             canvas.width = canvas.width; // Limpia el lienzo

      context.strokeStyle = "#0000a0";
      context.lineJoin = "round";
      context.lineWidth = 6;

      for(var i=0; i < movimientos.length; i++)
      {     
        context.beginPath();
        if(movimientos[i][2] && i){
          context.moveTo(movimientos[i-1][0], movimientos[i-1][1]);
         }else{
          context.moveTo(movimientos[i][0], movimientos[i][1]);
         }
         context.lineTo(movimientos[i][0], movimientos[i][1]);
         context.closePath();
         context.stroke();
      }
    }
    function convertCanvasToImage(canvas) {
           var image = new Image();
           image.src = canvas[0].toDataURL("image/png");
            alert(image);
           return image;
    }
    </script>
    <div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div>
    <button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button>

    </body>
    </html>

Answer 2

使用googleapis库中的jQuery库。在body标记的末尾添加脚本标记。

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body style="background: #eee;" onload="crearLienzo()">
<div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div>
<button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button>
<script type="text/javascript" >
    var movimientos = new Array();
    var pulsado;
    function crearLienzo() { alert('hea');
    var canvasDiv = document.getElementById('lienzo');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 200);
canvas.setAttribute('height', 200);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

    $('#canvas').mousedown(function(e){
      pulsado = true;
      movimientos.push([e.pageX - this.offsetLeft,
          e.pageY - this.offsetTop,
          false]);
      repinta();
    });

    $('#canvas').mousemove(function(e){
      if(pulsado){
          movimientos.push([e.pageX - this.offsetLeft,
              e.pageY - this.offsetTop,
              true]);
        repinta();
      }
    });

    $('#canvas').mouseup(function(e){
      pulsado = false;
    });

    $('#canvas').mouseleave(function(e){
      pulsado = false;
    });
    repinta();

}


    function repinta() {
        // función para dibujar en el lienzo los movimientos del ratón que hemos
        // recogido en la variable "movimientos"
         canvas.width = canvas.width; // Limpia el lienzo

  context.strokeStyle = "#0000a0";
  context.lineJoin = "round";
  context.lineWidth = 6;

  for(var i=0; i < movimientos.length; i++)
  {     
    context.beginPath();
    if(movimientos[i][2] && i){
      context.moveTo(movimientos[i-1][0], movimientos[i-1][1]);
     }else{
      context.moveTo(movimientos[i][0], movimientos[i][1]);
     }
     context.lineTo(movimientos[i][0], movimientos[i][1]);
     context.closePath();
     context.stroke();
  }
}
function convertCanvasToImage(canvas) {
       var image = new Image();
       image.src = canvas[0].toDataURL("image/png");
        alert(image);
       return image;
}
</script>

</body>
</html>

这种方式可以在任何地方使用。此外，由于脚本标记包含在body标记的末尾，因此它将在加载所有css和图像文件后加载。

当我把它放在服务器上时JavaScript不起作用

2 个答案: