Question

我怀疑从屏幕左侧开始并在屏幕右上方区域完成的移动图形。

让我们看看。我是这个新手。我在Canvas和JS上做这个，也用jQuery做。我有一个移动的数字，每次我点击它（或画布）改变它的颜色。

但我的问题在于以下内容：当我点击移动物体时，我希望该物体告诉我它的宽度和高度。但是告诉我它的宽度和高度的是画布，而不是移动的人物。

我该如何改进？我做错了什么事？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Moving Figure</title>
    <meta charset="utf-8">
</head>

<body>
    <canvas id="canvas" width="400" height="400" style="border:1px solid #000000"></canvas>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

    <script>

    var color = ['green', 'red', 'blue', 'purple', 'yellow'];
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var posicion = 0;    
    var tamano = 0;

    setInterval(function () {

    ctx.clearRect(0, 0, 400, 400);
    ctx.fillRect(posicion, 0, tamano, 400-tamano);

    posicion++;
    tamano++;

    if (posicion > 400){
        posicion = 0;
        tamano = 0;
        ctx.fillStyle = color[Math.floor(Math.random() * 4)]; 
        }
    }, 30);


    $("#canvas").click(function(){
        ctx.fillStyle = color[Math.floor(Math.random() * 4)];

    $("p").text( "The Width of the figure is " + event.pageX + " and the Height is " + event.pageY);
    });

  </script>
   <p id="texto"></p>
</body>
</html>

提前致谢！

Answer 1

这是因为对于canvas的点击事件，项目event.pageX和event.pageY将与画布相关。虽然你可以弄清楚你的数字的宽度和高度，因为你在声明中说明了它：

ctx.fillRect(posicion, 0, tamano, 400-tamano);

事件参数为fillRect(x, y, width, height)。因此宽度为tamano，高度为400-tamano：

$("p").text( "The Width of the figure is " + tamano+ " and the Height is " + (400-tamano));

只需单击画布就会发生这种情况，如果您希望仅在单击图形时更新，则可以通过将x,y,width,height值与{{1}进行比较来进行碰撞检测鼠标：

mouseX,mouseY

Fiddle Example

Answer 2

您必须使用变量tamano来获取该元素的大小。

请注意，你的元素在画布的“外部”，因此宽度可能看起来有点奇怪。

工作片段：

var color = ['green', 'red', 'blue', 'purple', 'yellow'];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var posicion = 0;
var tamano = 0;

setInterval(function () {

    ctx.clearRect(0, 0, 400, 400);
    ctx.fillRect(posicion, 0, tamano, 400 - tamano);

    posicion++;
    tamano++;

    if (posicion > 400) {
        posicion = 0;
        tamano = 0;
        ctx.fillStyle = color[Math.floor(Math.random() * 4)];
    }
}, 30);


$("#canvas").click(function () {
    ctx.fillStyle = color[Math.floor(Math.random() * 4)];

    $("p").text("The Width of the figure is " + tamano + " and the Height is " +  (400 - tamano));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400" style="border:1px solid #000000"></canvas>
<p id="texto"></p>

每次点击它时如何知道移动图形的宽度和高度？

2 个答案: