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

Question

I would love to create a fiddle for this to show but i'm using php and it won't let me use php in those so i'm hoping someone will still know whats going on! 我很乐意为此创建一个小提琴，但我使用的是php，但不允许我在其中使用php，所以我希望有人仍然知道发生了什么！

I have a javascript that works completely fine on it's own. 我有一个完全可以正常运行的JavaScript。 It is a HTML click and drag canvas. 这是HTML单击并拖动画布。 The click and drag is constrained to a circle and draws the image to the canvas when you click a button that is next to the canvas. 单击和拖动被限制为一个圆形，并且当您单击画布旁边的按钮时，会将图像绘制到画布上。 This button calls a method that draws the image onto the canvas and makes it click and draggable. 此按钮调用一种方法，该方法将图像绘制到画布上并使其单击并可拖动。 I have tested this by itself and it works beautifully. 我已经对其进行了单独测试，并且效果很好。 When I add a simple line of php code my click and drag canvas quits moving the image. 当我添加简单的php代码行时，单击并拖动画布会退出移动图像。 When you click the button to draw the image on, that works, but then you can't move the image. 当您单击按钮以绘制图像时，该方法有效，但是您无法移动该图像。

I am beyond confused because the php that i am using has nothing to do with what is going on in the canvas. 我非常困惑，因为我使用的php与画布中发生的事情无关。 Here is the code: 这是代码：

it's also important to point out that this code works fine in safari but doesn't work at all in chrome so i know it has something to do with chrome i just don't understand what the problem is. 同样重要的是要指出，此代码在Safari中可以正常使用，但在chrome中根本不起作用，所以我知道它与chrome有关，我只是不明白问题是什么。

My question is mainly, is there a way that safari loads versus chrome that would affect running javascript and php on the same page since it works fine in one browser and not the other. 我的问题主要是，Safari是否可以加载与chrome相比会影响在同一页面上运行javascript和php的方法，因为它可以在一种浏览器上正常运行，而在其他浏览器上则无法正常运行。 I just added the code so people would know what I am referring to. 我只是添加了代码，以便人们知道我指的是什么。

Here is the 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>

Here is the full code 这是完整的代码

<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

Anyone curious and wanting to know the answer of how i solved this here you go. 任何人想知道我如何解决这个问题的答案都可以。 I am new to HTML5 canvas and how it works. 我是HTML5画布及其工作原理的新手。 After a lot of trial and error I found out that the canvas offset was wrong once the canvas changed from the top of the screen to somewhere else. 经过大量的试验和错误，我发现一旦画布从屏幕顶部更改为其他位置，画布偏移是错误的。 It was as simple as that.... 就这么简单...

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