Chrome上的HTML5画布和php无法正常工作

Question

我很乐意为此创建一个小提琴，但我使用的是php，但不允许我在其中使用php，所以我希望有人仍然知道发生了什么！

我有一个完全可以正常运行的JavaScript。 这是HTML单击并拖动画布。 单击和拖动被限制为一个圆形，并且当您单击画布旁边的按钮时，会将图像绘制到画布上。 此按钮调用一种方法，该方法将图像绘制到画布上并使其单击并可拖动。 我已经对其进行了单独测试，并且效果很好。 当我添加简单的php代码行时，单击并拖动画布会退出移动图像。 当您单击按钮以绘制图像时，该方法有效，但是您无法移动该图像。

我非常困惑，因为我使用的php与画布中发生的事情无关。 这是代码：

同样重要的是要指出，此代码在Safari中可以正常使用，但在chrome中根本不起作用，所以我知道它与chrome有关，我只是不明白问题是什么。

我的问题主要是，Safari是否可以加载与chrome相比会影响在同一页面上运行javascript和php的方法，因为它可以在一种浏览器上正常运行，而在其他浏览器上则无法正常运行。 我只是添加了代码，以便人们知道我指的是什么。

这是PHP

<dl class="header">
<?php
    $name = $_GET['id'];
    if ($name=="bracelet") {
       echo "<li>Design x!</li>";
    }
    elseif ($name=="purse") {
       echo "<li>Design y!</li>";
    }
    elseif ($name=="ring") {
       echo "<li>Design z!</li>";
    }
?>
</dl>

这是完整的代码

<HTML>
<HEAD>
<style>
#canvas {
   border:1px solid red;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</HEAD>
<BODY>
<dl class="header">
<?php
    $name = $_GET['id'];
    if ($name=="bracelet") {
       echo "<li>Design x!</li>";
    }
    elseif ($name=="purse") {
       echo "<li>Design y!</li>";
    }
    elseif ($name=="ring") {
       echo "<li>Design z!</li>";
    }
?>
</dl>

<h5>Add Images and Canvases with the buttons<br>
Click to select which image to move.<br>
Then move the mouse to desired drop location<br>
and click again to drop the image there.</h5>

<canvas id="canvas" width=300 height=300></canvas>
<input type="image" src="http://s25.postimg.org/tovdg674b/crystal_003.png" id="button1" width="35"     height="20"></input>
<input type="image" src="http://s25.postimg.org/ph0l7f5or/crystal_004.png" id="button2" width="35" height="20"></input>
<input type="image" src="http://s25.postimg.org/60fvkwakr/crystal_005.png" id="button3" width="35" height="20"></input>
<input type="image" src="http://s25.postimg.org/fz5fl49e3/crystal_006.png" id="button4" width="35" height="20"></input>
<button id="save">save</button>
 <br>
<script>
// canvas stuff
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;

var contexts = [];
var points = [];

// image stuff
var states = [];
var img = new Image();
img.onload = function () {}
img.src = "http://s25.postimg.org/5qs46n4az/crystal_009.png";

setUpCanvas();
setUpPoints();

function setUpCanvas() {
   contexts.push(canvas.getContext("2d"));
   // link the new canvas to its context in the contexts[] array
   canvas.contextIndex = contexts.length;
   // wire up the click handler
   canvas.onclick = function (e) {
      handleClick(e, this.contextIndex);
   };
  // wire up the mousemove handler
  canvas.onmousemove = function (e) {
      handleMousemove(e, this.contextIndex);
   };
   canvas.addEventListener('dblclick', function() {
                        removeState(this.contextIndex);
                        });
}

function setUpPoints() {
   //points that make up a circle circumference to an array
   points = [];
   for (var degree=0; degree<360; degree++) {
    var radians = degree * Math.PI/180;
    var TO_RADIANS = Math.PI/180;
    var xpoint = centerX + radius * Math.cos(radians);
    var ypoint = centerY + radius * Math.sin(radians);
    points.push({
                x: xpoint,
                y: ypoint
                });
}
ctx.beginPath();
ctx.moveTo(points[0].x + 4, points[0].y + 4)
//draws the thin line on the canvas
for (var i = 1; i < points.length; i++) {
    var pt = points[i];
    ctx.lineTo(pt.x + 4, pt.y + 4);
}
ctx.stroke(); //end of drawing the thin line
}

function addCircle() {
   ctx.beginPath();
   ctx.moveTo(points[0].x + 4, points[0].y + 4)
   //draws the thin line on the canvas
   for (var i = 1; i < points.length; i++) {
    var pt = points[i];
    ctx.lineTo(pt.x + 4, pt.y + 4);
  }
   ctx.stroke(); //end of drawing the thin line
 }

function clearAll() {
   //Clear all canvases
   for (var i = 0; i < contexts.length; i++) {
      var context = contexts[i];
      context.clearRect(0, 0, canvas.width, canvas.height);
  } 
}

function handleClick(e, contextIndex) {

    e.stopPropagation();

   var mouseX = parseInt(e.clientX - e.target.offsetLeft);
   var mouseY = parseInt(e.clientY - e.target.offsetTop);

   for (var i = 0; i < states.length; i++) {

      var state = states[i];
      console.log(state);

    if (state.dragging) {
        state.dragging = false;
        state.draw();
        continue;
    }
    if (state.contextIndex == contextIndex && mouseX > state.x && mouseX < state.x + state.width && mouseY > state.y && mouseY < state.y + state.height) {
        state.dragging = true;
        state.offsetX = mouseX - state.x;
        state.offsetY = mouseY - state.y;
        state.contextIndex = contextIndex;
    }
    state.draw();
  }
}

function handleMousemove(e, contextIndex) {
   e.stopPropagation();

   var mouseX = parseInt(e.clientX - e.target.offsetLeft);
   var mouseY = parseInt(e.clientY - e.target.offsetTop);
   clearAll();
   addCircle();
   var minDistance = 1000;
   var minPoint = -1;

   for (var i = 0; i < states.length; i++) {

    var state = states[i];

    if (state.dragging) {
        for (var i = 0; i < points.length; i++) {
            var pt = points[i];
            var dx = mouseX - pt.x;
            var dy = mouseY - pt.y;
            if ((dx > 0 && dx>120)) {
                state.x = mouseX - state.offsetX;
                state.y = mouseY - state.offsetY;
                state.contextIndex = contextIndex;
            } else if ((dx < 0 && dx < -120)) {
                state.x = mouseX - state.offsetX;
                state.y = mouseY - state.offsetY;
                state.contextIndex = contextIndex;
            }
            else {
                var distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < minDistance) {
                    minDistance = distance;
                    //points in relation to the constrained line (where it will be drawn to)
                    //reset state.x and state.y to closest point on the line
                    state.x = pt.x - img.width / 2;
                    state.y = pt.y - img.height / 2;
                    state.contextIndex = contextIndex;
                }
            }
        }

    }
    state.draw();
   }
}

function removeState(contextIndex) {
   for (var i = 0; i < states.length; i++) {

    var state = states[i];
    state.remove();
   }
}

function addState(image) {
   var ptxy = points[1];
   state = {}
   state.dragging = false;
   state.contextIndex = 1;
   state.image = image;
   state.x = ptxy.x - image.width / 2;
   state.y = ptxy.y - image.height / 2;
   state.width = image.width;
   state.height = image.height;
   state.offsetX = 0;
   state.offsetY = 0;
   state.draw = function () {
    var context = contexts[this.contextIndex - 1];
    if (this.dragging) {
        context.strokeStyle = 'black';
        context.strokeRect(this.x, this.y, this.width + 2, this.height + 2)
    }
    context.drawImage(this.image, this.x, this.y);
}
state.draw();
return (state);
}
function save() {
   // var data = ctx.getImageData(0, 0, canvas.width, canvas.height);

}

$("#button1").click(function () {
                states.push(addState(img));
                });
$("#button2").click(function () {
                states.push(addState(img));
                });
$("#button3").click(function () {
                states.push(addState(img));
                });
$("#button4").click(function () {
                states.push(addState(img));
                });
$("#save").click(function () {
             save();
             });


</script> 
</BODY>
</HTML>

Answer 1

任何人想知道我如何解决这个问题的答案都可以。 我是HTML5画布及其工作原理的新手。 经过大量的试验和错误，我发现一旦画布从屏幕顶部更改为其他位置，画布偏移是错误的。 就这么简单...

Chrome上的HTML5画布和php无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-29 20:42:26

Chrome上的HTML5画布和php无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-29 20:42:26

解决方案1
1 已采纳 2014-09-29 20:42:26