如何知道每次點擊它時移動圖形的寬度和高度？

我對從屏幕左側開始並在屏幕右上角區域結束的移動圖形有疑問。如何知道每次點擊它時移動圖形的寬度和高度？

讓我們來看看。我是這個新手。我在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>

提前感謝！

來源

2015-09-07 incrativ

及其對'canvas' click事件，所以'event.pageX'和'event.pageY'是畫布本身的事件。它對這個數字一無所知。您需要查看鼠標點擊的座標，取決於它是否基於其位置點擊圖形。但是你應該保留圖的'width'和'height'，或者應該能夠根據你的變量'posicion'和'tamano'來計算它。 –

這是因爲對於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相比鼠標mouseX,mouseY：

$("#canvas").click(function(e){ 
    var cRect = canvas.getBoundingClientRect(); 
    var mouseX = e.clientX - cRect.left; 
    var mouseY = e.clientY - cRect.top;   

    var figureX = posicion; 
    var figureY = 0; 
    var figureW_off = posicion + tamano; 
    var figureH_off = 400-tamano;  
    ctx.fillStyle = color[Math.floor(Math.random() * 4)]; 

    if(mouseX >= figureX && mouseX <= figureW_off && 
     mouseY >= figureY && mouseY <= figureH_off) 
    { 
     $("p").text("The Width of the figure is " + tamano+ " and the Height is " + (400-tamano)); 
    } 
});

Fiddle Example

來源

2015-09-07 00:42:26

必須使用可變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>

來源

2015-09-07 00:44:13

如何知道每次點擊它時移動圖形的寬度和高度？

回答

相關問題