Jquery 如何使画布内的val函数传递到外部_Jquery_Html_Canvas

Jquery 如何使画布内的val函数传递到外部

jquery html canvas

Jquery 如何使画布内的val函数传递到外部,jquery,html,canvas,Jquery,Html,Canvas,我尝试了一个画布元素来制作一个游戏：单击鼠标并擦除部分图片，这是函数eventUp（）中的一个val，称为efforce，这意味着在提交结果时，擦除的区域百分比是多少。但是看起来本地变量不能在addEventListener之外使用，我如何将其转出并在ajax jquery中使用呢 <html> <head> <style> #article { width:300px; float:left; padding:10px;

我尝试了一个画布元素来制作一个游戏：单击鼠标并擦除部分图片，这是函数eventUp（）中的一个val，称为efforce，这意味着在提交结果时，擦除的区域百分比是多少。但是看起来本地变量不能在addEventListener之外使用，我如何将其转出并在ajax jquery中使用呢

<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>


#文章{
宽度：300px；
浮动：左；
填充：10px；
}
#旁白{
宽度：600px；
高度：500px；
浮动：对；
背景色：#eeeeee；
填充：10px；
}
它是一个有一只眼睛或两只眼睛的仆从
var bodyStyle=document.body.style；
bodyStyle.mozUserSelect='none'；
bodyStyle.webkitUserSelect='none'；
var img=新图像（）；
var canvas=document.querySelector（'canvas'）；
canvas.style.backgroundColor='transparent'；
canvas.style.position='绝对'；
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_17.jpg","p_18.jpg","p_19.jpg","p"p"u 21.jpg"p"p",，
"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'，函数（e）{
var-ctx；
var w=600；
h=500；
var offsetX=canvas.offsetLeft，
offsetY=canvas.offsetTop；
var mousedown=false；
功能层（ctx）{
ctx.fillStyle='灰色'；
ctx.fillRect（0,0,w,h）；
} 
函数eventDown（e）{
e、 预防默认值（）；
mousedown=true；
} 
函数eventUp（e）{
e、 预防默认值（）；
mousedown=false；
var data=ctx.getImageData（0,0，w，h）.data；
对于（变量i=0，j=0；i
猜数：

只需在外部声明它，作为一个全局变量，在

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

不正确，替换为：

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

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

data : allVariables

谢谢你耐心的建议，它对我有用！我曾经尝试过ajax数据：{name:name…}方式，但它不起作用，我不知道为什么。然后我把它转给了斯汀，不客气。嗯，你还需要有相应的接收器。您将PHP编程为期望和解析字符串，现在将其调整为期望和接收对象。这就是它的工作原理：直接传递键值，而不是将字符串解析为键值，这只是浪费CPU时间。

data : allVariables