Javascript帆布如何繪製隨機形狀？

Question

當用戶加載頁面我想繪製一個隨機的形狀。 例如一個圓圈。 當用戶再次加載頁面時，我想繪製另一個隨機形狀。

我知道如何繪製形狀，但我可以讓它們隨機出現？

Answer 1

您可以使用Math.Floor函數生成一個隨機數，然後使用該隨機數就可以用它從您的數組中繪製一個特定的形狀。

由於您沒有提供您的陣列我創建了一個非常簡單的jsfiddle您展示一個例子https://jsfiddle.net/kny74wve/只要保持按下頂部的運行按鈕左邊產生一個新的隨機數

的Html

<canvas id="Canvas" width="400" height="400"></canvas> 

的Javascript

var canvas = document.getElementById("Canvas"); 
var context = canvas.getContext("2d"); 
context.fillStyle = "#AAA"; 
context.fillRect(0, 0, 400, 400); 

var randomShape = Math.floor((Math.random() * 3) + 1); 

if (randomShape == 1) { 
    context.beginPath(); 
    context.rect(25, 50, 200, 100); 
    context.fillStyle = '#00FF00'; 
    context.fill(); 
    context.lineWidth = 7; 
    context.strokeStyle = '#000'; 
    context.stroke(); 
} else if (randomShape == 2) { 
    context.beginPath(); 
    context.arc(200, 200, 69, 0, 2 * Math.PI, false); 
    context.fillStyle = '#FF0000'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#000'; 
    context.stroke(); 
} else if (randomShape == 3) { 
    context.beginPath(); 
    context.arc(276, 255, 70, 0, Math.PI, false); 
    context.closePath(); 
    context.lineWidth = 5; 
    context.fillStyle = '#0000FF'; 
    context.fill(); 
    context.strokeStyle = '#000'; 
    context.stroke(); 
}