首先，我創建兩個函數藍色和紅色。
function drawBlueCircle(){
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(mouse.x,mouse.y,50,0,Math.PI *2)
ctx.fill();
}
function drawRedCircle(){
ctx.fillStyle = 'red'
ctx.beginPath();
ctx.arc(mouse.x,mouse.y,50,0,Math.PI * 2);
ctx.fill();
}
這裡我在 For 迴圈中使用 if 語句建立一個 clickEventListener
canvas.addEventListener('click',function(event){
mouse.x = event.x,
mouse.y = event.y
for(let i=0;i<event.length;i++){
(i%2==0)? drawBlueCircle():drawRedCircle() // here i am trying to alter my clicks using for loops.
}
})
我的錯誤是：
即使單擊滑鼠後，它仍然保持紅色。我透過其他 eventListener mousemove 獲得了這种红色，但這不是問題。
P.S.：這不是完整的程式碼。我只給了我無法解決的一個（上面）。
我嘗試了上面的程式碼，但無法改變顏色。
最簡單的選擇是使用布林變數來儲存您期望的顏色，然後在每次點擊時反轉它：
function drawBlueCircle() { console.log('drawBlueCircle called') } function drawRedCircle() { console.log('drawRedCircle called') } // This variable tracks which color we are up to let isBlue = true // Added the listener to 'window' for the sake of the example window.addEventListener('click', function(event) { // Run the expected function if (isBlue) { drawBlueCircle() } else { drawRedCircle() } // Invert the next color isBlue = !isBlue })您應該維護下一個要繪製的顏色的引用，而不是使用循環。此外，如果您將顏色（以及上下文和事件）作為函數參數傳遞，則可以將函數簡化為一個：
drawCircle，並使用該顏色來確定圓的填滿顏色。// Pass in the context, event, and colour to the // function so you can use them function drawCircle(ctx, event, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(event.x, event.y, 50, 0, Math.PI *2); ctx.fill(); } const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); // Initialise the color let color = 'red'; canvas.addEventListener('click', event => { // Draw a circle with the current colour drawCircle(ctx, event, color); // Switch the color color = color === 'red' ? 'blue' : 'red'; });