使用JavaScript數學。方法如HTML Canvas .fillRect座標

希望你一切順利！使用JavaScript數學。方法如HTML Canvas .fillRect座標

我花了整整一個晚上試圖找出如何使用(Math.floor(Math.random())作爲HTML畫布元素上使用的.fillRect方法的座標。

我查看過這個網站和網上的一些答案，但沒有任何建議已經工作到目前爲止。我目前的做法是基於this Stack Overflow answer。

我想每次單擊按鈕時在畫布的隨機點繪製一個20 * 20px的矩形。除了將從Math方法獲得的隨機數字填入.fillRect座標參數之外，我已經完成了所有工作。

這是我的HTML代碼和我的JS代碼：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
$("#btn").click(function() { 
 

 
    var rectCoord = { 
 
    "x": (Math.floor(Math.random() * 699) + 1), //Canvas is 700px wide. 
 
    "y": (Math.floor(Math.random() * 599) + 1), //Canvas is 600px high. 
 
    }; 
 

 

 
    console.log(rectCoord.x, rectCoord.y) 
 
    //Test. Random X and Y points log in console correctly. 
 

 
    ctx.fillRect(rectCoord.x, rectCoord.y, 20, 20); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <canvas id="canvas"></canvas> 
 
    <button id="btn">Click!</button> 
 

 
</div>

的console.log是我在那裏測試，如果：

1）的「X」和「Y」點數在每次點擊都被隨機化，並且

2）rectCoord.x，rectCoord.y數據點正在通過正確的用於下面的代碼行中。

隨機點正在記錄到控制檯正常，每當我在fillRect中放置整數作爲座標參數時，它會完美繪製一個矩形。

我只是不知道如何將隨機點作爲參數插入.fillRect。他們爲什麼作爲console.log而不是.fillRect的參數？

非常感謝你的回覆，我很新的編碼，我只是不能包住我的頭！任何幫助深表感謝！

來源

2017-09-17 Pete

你試過設置'ctx.fillStyle =「black''或類似的東西？ –

是的，它沒有區別。 'fillStyle'默認爲黑色，當我爲座標參數輸入數字（例如40,500）時，代碼將按照它應該運行的方式運行。這就是爲什麼我認爲這與我嘗試使用變化的變量作爲座標值有關。 @PatrickRoberts – Pete

你應該使用'ctx。fillRect（（Math.random（）* ctx.canvas.width-20）| 0，（Math.random（）* ctx.canvas.height -20）| 0，20，20）;'確保20乘20矩形**始終**出現在畫布上。 – Blindman67

你必須把畫布大小（也許你擁有了它在樣式表）

，然後簡單地刪除舊的位置，並更新

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
//creates a function for the random value 
 
function rectCoord(){ 
 
    return { 
 
    "x": (Math.floor(Math.random()*699)+1), 
 
    "y": (Math.floor(Math.random()*599)+1) 
 
    } 
 
} 
 
//defines the initial values 
 
var x = 0,//rectCoord().x 
 
    y = 0;//rectCoord().y 
 
//then draw 
 
ctx.fillRect(x, y, 20, 20); 
 
$("#btn").click(function() { 
 
    //in each click delete the previous state 
 
    ctx.clearRect(x, y, 20, 20); 
 
    //renews values 
 
    x = rectCoord().x; 
 
    y = rectCoord().y; 
 
    //renews the position of the drawing 
 
    ctx.fillRect(x, y, 20, 20); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <canvas id="canvas" width="700" height="600"></canvas> 
 
    <button id="btn">Click!</button> 
 
</div>

來源

2017-09-17 22:22:34 AvrilAlejandro

唯一重要的是要設置畫布大小。只有改變纔會導致方格總是繪製。如果您點擊問題演示中的按鈕次數足夠多，則正方形將最終渲染，但機會相當低，因此它落在畫布的默認邊界內。 –

啊哈！非常感謝你！！所以我將寬度和高度屬性添加到畫布標籤，這立即解決了問題。但是我已經在CSS樣式表中有這些值。內聯屬性和在外部樣式表中聲明有什麼區別？ @PatrickRoberts – Pete

@Pete CSS樣式表使畫布「像素」「拉伸」，以便在屏幕上適合CSS尺寸，而屬性控制畫布圖像數據中實際包含的像素數。這種行爲是由於'

的您繪製的矩形超出畫布範圍，請將寬度和高度設置爲<canvas>標記：

<canvas id="canvas" width="700" height="600"></canvas>

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var width = canvas.width; 
 
var height = canvas.height; 
 

 
$("#btn").click(function() { 
 

 
    var rectCoord = { 
 
    "x": (Math.floor(Math.random() * width) + 1), 
 
    "y": (Math.floor(Math.random() * height) + 1) 
 
    }; 
 

 

 
    console.log(rectCoord.x, rectCoord.y) 
 
    //Test. Random X and Y points log in console correctly. 
 

 
    ctx.fillRect(rectCoord.x, rectCoord.y, 20, 20); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <button id="btn">Click!</button> 
 
    <canvas id="canvas" width="700" height="600"></canvas> 
 

 
</div>

來源

2017-09-18 01:39:43

使用JavaScript數學。方法如HTML Canvas .fillRect座標

回答

相關問題