如何在 canvas 函数内部传递一个 val 到外部

Question

我尝试了一个canvas元素来做一个游戏：你点击鼠标擦掉部分图片，也就是函数eventUp()里面的一个val，叫做effort，意思是当你提交结果，您擦除的面积百分比。但是在addEventListener之外貌似不能使用局部变量，怎么才能传出来在ajaxjquery中使用呢？

<html>
 <head>
   <style>

#article {
    width:300px;
    float:left;
    padding:10px;        
    }
#aside{
    width:600px;
    height:500px;
    float:right;
    background-color:#eeeeee;
    padding:10px;
    }
  </style>

</head>

<body>
   <h1> It is a minion with one eye or two eyes</h1>

<div id="aside">
  <canvas id="mycanvas" width="600" height="500" style="border:1px solid #c3c3c3;">
  </canvas>
<script>
   var bodyStyle = document.body.style; 
   bodyStyle.mozUserSelect = 'none'; 
   bodyStyle.webkitUserSelect = 'none'; 


   var img = new Image(); 
   var canvas = document.querySelector('canvas'); 
       canvas.style.backgroundColor='transparent'; 
       canvas.style.position = 'absolute'; 
   var imgs = ['p_2.jpg','p_3.jpg','p_4.jpg','p_5.jpg','p_6.jpg','p_7.jpg','p_8.jpg','p_9.jpg','p_10.jpg','p_12.jpg'
       ,'p_12.jpg','p_13.jpg','p_14.jpg','p_15.jpg','p_16.jpg','p_17.jpg','p_18.jpg','p_19.jpg','p_20.jpg','p_21.jpg','p_22.jpg',
       'p_23.jpg','p_24.jpg','p_25.jpg','p_26.jpg']; 
   var num = Math.floor(Math.random()*24); 


   img.src = imgs[num]; 

   img.addEventListener('load', function(e) { 
          var ctx; 

          var w=600;
              h=500;
          var offsetX = canvas.offsetLeft, 
              offsetY = canvas.offsetTop; 
          var mousedown = false; 

        function layer(ctx) { 
               ctx.fillStyle = 'gray'; 
               ctx.fillRect(0, 0, w, h); 
               } 

        function eventDown(e){ 
               e.preventDefault(); 
               mousedown=true; 
               } 
        function eventUp(e){ 
               e.preventDefault(); 
               mousedown=false; 
               var data=ctx.getImageData(0,0,w,h).data;
               for(var i=0,j=0;i< data.length;i+=4){
                  if(data[i] && data[i+1] && data[i+2] && data[i+3]){
                  j++;
                  }
                var effort=j;
               }


               }           

        function eventMove(e){ 
              e.preventDefault(); 
              if(mousedown) { 
                if(e.changedTouches){ 
                  e=e.changedTouches[e.changedTouches.length-1]; 
                } 
               var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, 
                   y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; 
             with(ctx) { 
                 beginPath() 
             //arc(x, y, 10, 0, Math.PI * 2);//绘制圆点 
                 rect(x,y,50,50);
                 fill(); 
            } 
          } 
        } 

        canvas.width=w; 
        canvas.height=h; 
        canvas.style.backgroundImage='url('+img.src+')'; 
        ctx=canvas.getContext('2d'); 
        ctx.fillStyle='transparent'; 
        ctx.fillRect(0, 0, w, h);
        layer(ctx); 

        ctx.globalCompositeOperation = 'destination-out'; 

        canvas.addEventListener('touchstart', eventDown); 
        canvas.addEventListener('touchend', eventUp); 
        canvas.addEventListener('touchmove', eventMove); 
        canvas.addEventListener('mousedown', eventDown); 
        canvas.addEventListener('mouseup', eventUp); 
        canvas.addEventListener('mousemove', eventMove);  
    }); 

 </script>
   </div> 

      <script type="text/javascript">
           $(document).ready(function(){
                $("#submit").click(function(){

                      var taskid=num;
                      var name=$("#name").val();
                      var guessnum=$("#guessnum").val();

                      $.ajax({
                          type:"post",
                          url:"GameMysql.php",
                                     data:"name="+name+"&taskid="+taskid+"&guessnum="+guessnum+"&effort="+effort,
                         success:function(data){
                             $("#article").html(data);
                          }

                      });

                });
           });
  </script>
  <div id="article" >
      <form>
           name : <input type="text" name="name" id="name"/>
           </br>

       guessNum: <input type="number" name="guessnum"       id="guessnum"> 
           <input type="button" value="Send Guess" id="submit">

    </form>
    </div>
    </body>
    </html>

Answer 1

就在外面声明一下，作为一个全局变量，紧挨着

<script>
   var bodyStyle = document.body.style;

因此它可以在您的脚本中随处访问。

您还可以在任何地方使用 window.effort。

请注意，使用全局变量是一种不好的做法，不鼓励这样做，但这回答了您的问题。您还可以创建一个全局对象来存储您的变量，例如：

var allVariables = { effort : 0, otherVar : otherVal }; 并使用 allVariables.effort.

访问变量

顺便说一句，ajax参数应该是一个对象，而不是字符串，所以:

data:"name="+name+"&taskid="+taskid+"&guessnum="+guessnum+"&effort="+effort,

不正确，替换为：

 data:{name:name, taskid:taskid, guessnum:guessnum, effort:effort}

使用全局对象解决方案，您甚至可以：

data : allVariables

如何在 canvas 函数内部传递一个 val 到外部

How to make a val inside the canvas function transfer outside

html

jquery

canvas