将 html 变量转移到 php

Question

我是php的新手，如果我写了一段html5 canvas的代码，想把canvas中的var effort值存储到php 会话转移到 mysql，如何做到这一点？对应代码已打星，提前谢谢

<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 = img.width, 
//     h = img.height; 
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; 
} 

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,20,20);
             fill(); 
         } 
    } 
} 
function consulation(e){
  e.preventDefault();
   var num = 0;
  var datas = canvas.getImageData(0,0,w,h);
  for (var i = 0; i < datas.data.length; i++) {
    if (datas.data[i] == 0) {
        num++;
     };
  };
  **var effort=num/(w*h); **

}
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);
canvas.addEventListener("click",consulation);

 }); 

</script>


</html>

</div>

</body>
</html>
<?php

**$_SESSION["EFFORT"]=$effort;**
?>

Answer 1

这可能不是最佳解决方案，但是，您可以使用 ajax 请求调用 PHP 脚本并将变量从 Javascript 传递到 PHP 脚本。

Answer 2

您可以使用 cookie 来做到这一点，javascript 和 PHP 都可以设置和读取它们。

正如另一位发帖人所说，AJAX 也是一个选项。

我相信你也可以设置一个 URL 片段（域。com/blah#stuff），它可以被 PHP 解析，但那时你会重新加载页面，所以你也可以用 POST 值来做。

将 html 变量转移到 php

transfer html var to php

html

php

canvas