キャンバスに座標を表示する - JavaScript

Question

このJavaScriptを使用して、キャンバスにクライアントのマウス座標を表示してから、ユーザーのクリック位置に図形を作成しようとしています。シェイプの色は、クリックごとに赤、青、緑の間で回転するはずです。座標が何らかの理由で機能しないので、私は形状図をテストすることができませんでした。私はコードを最適にするのではなく、機能させることにもっと興味があります。

var colors = ["red", "blue", "green"]; 
 
var index = 0; 
 

 
function showCoords(event) { 
 
    console.log(event); 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    document.getElementById("mouse_position").innerHTML = x + ", " + y; 
 
} 
 

 
function clearCoor(event) { 
 
    console.log(event); 
 
    document.getElementById("mouse_position").innerHTML = ""; 
 
} 
 

 
function drawShape(event) { 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var circle = document.getElementById("circle"); 
 
    var square = document.getElementById("square"); 
 
    var triangle = document.getElementById("triangle"); 
 
    var length = colors.length(); 
 
    var index = 0; 
 
    var color = colors[index]; 
 
    if (index >= length) { 
 
    index = 0; 
 
    } else { 
 
    index++; 
 
    } 
 

 
    if (circle.checked == true) { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, 25, 0, 2 * Math.PI); 
 
    ctx.fillStyle = color; 
 
    ctx.fill(); 
 
    } 
 

 
    if (square.checked == true) { 
 
    ctx.fillStyle = color; 
 
    ctx.fillRect(x, y, 50, 50); 
 
    } 
 

 
    if (triangle.checked == true) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x, y); 
 
    ctx.lineTo(x + 25, y - 50); 
 
    ctx.lineTo(x - 50, y - 50); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle = color; 
 
    ctx.stroke(); 
 
    } 
 
} 
 

 
function clearCanvas() { 
 
    fillStyle = white; 
 
    fillRect(0, 0, canvas.width, canvas.height); 
 
}

<canvas onclick="drawShape(event)" onmousemove="showCoords(event)" onmouseout="clearCoor(event)" id="myCanvas" width="500" height="500" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
</canvas> 
 

 
<form action=""> 
 
    <input type="radio" id="circle" name="shape" value="circle" checked="checked">Circle 
 
    <br> 
 
    <input type="radio" id="square" name="shape" value="square">Square 
 
    <br> 
 
    <input type="radio" id="triangle" name="shape" value="triangle">Triangle 
 
</form> 
 

 
<button type="button" onclick="clearCanvas()">Clear Canvas</button> 
 

 
<div id="mouse_position"></div>

Answer 1

あなたのJSでのいくつかのエラーを持っています。

• 代わりcolors.length()

• の使用colors.lengthdrawShape機能からvar index = 0を削除します。

• indexインクリメントコードが正しくありません。

• 正確な座標を取得するには、event.page（X | Y）を使用します。

以下のコードは正しく動作します。

var colors = ["red", "blue", "green"]; 
 
var index = 0; 
 

 
function showCoords(event) { 
 
    //console.log(event); 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    document.getElementById("mouse_position").innerHTML = x + ", " + y; 
 
} 
 

 
function clearCoor(event) { 
 
    //console.log(event); 
 
    document.getElementById("mouse_position").innerHTML = ""; 
 
} 
 

 
function drawShape(event) { 
 
    console.log(event); 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var x = event.pageX - canvas.offsetLeft; 
 
    var y = event.pageY - canvas.offsetTop; 
 
    var ctx = canvas.getContext("2d"); 
 
    var circle = document.getElementById("circle"); 
 
    var square = document.getElementById("square"); 
 
    var triangle = document.getElementById("triangle"); 
 
    var length = colors.length; 
 
    var color = colors[index]; 
 
    if (++index >= length) { 
 
    index = 0; 
 
    } 
 
    
 
    if (circle.checked == true) { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, 25, 0, 2 * Math.PI); 
 
    ctx.fillStyle = color; 
 
    ctx.fill(); 
 
    } 
 

 
    if (square.checked == true) { 
 
    ctx.fillStyle = color; 
 
    ctx.fillRect(x, y, 50, 50); 
 
    } 
 

 
    if (triangle.checked == true) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x, y); 
 
    ctx.lineTo(x + 25, y - 50); 
 
    ctx.lineTo(x - 50, y - 50); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle = color; 
 
    ctx.stroke(); 
 
    } 
 
} 
 

 
function clearCanvas() { 
 
    fillStyle = white; 
 
    fillRect(0, 0, canvas.width, canvas.height); 
 
}

<canvas onclick="drawShape(event)" onmousemove="showCoords(event)" onmouseout="clearCoor(event)" id="myCanvas" width="500" height="500" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
</canvas> 
 

 
<form action=""> 
 
    <input type="radio" id="circle" name="shape" value="circle" checked="checked">Circle 
 
    <br> 
 
    <input type="radio" id="square" name="shape" value="square">Square 
 
    <br> 
 
    <input type="radio" id="triangle" name="shape" value="triangle">Triangle 
 
</form> 
 

 
<button type="button" onclick="clearCanvas()">Clear Canvas</button> 
 

 
<div id="mouse_position"></div>