将html转移到php

时间:2015-03-17 20:58:25

标签: php html canvas

我是php新手,如果我写了一段html5画布代码,并希望将画布中的var努力值存储到php会话中以转移到mysql,该怎么做?相应的代码是明星,thx提前

<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;**
?>

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

您可以使用cookie,javascript和PHP都可以设置和读取它们。

正如另一张海报所提到的,AJAX也是一种选择。

我相信你也可以设置一个可以被PHP解析的URL片段(domain.com/blah#stuff),但是那时你还是要重新加载页面,这样你就可以用POST来做值。