-3
A
回答
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();
}
相關問題
- 1. 如何繪製形狀獨家內部帆布
- 2. JavaScript帆布上隨機大小的矩形
- 3. 的Javascript帆布緯度LNG繪製
- 4. HTML5帆布扇貝形狀
- 5. 帆布形狀動畫
- 6. 帆布:形狀+陰影
- 7. 隨機繪製不同形狀的多邊形
- 8. 如何通過壓繪製QtQuick/QML帆布矩形和draging
- 9. 繪製臨時圈帆布
- 10. JS-帆布:重繪形狀在窗口調整大小
- 11. 如何繪製隨機飛機
- 12. 在畫布上繪製透明形狀
- 13. HTML畫布 - 間隔後繪製形狀
- 14. Javascript的html5帆布隨機開關語句
- 15. 帆布Javascript繪圖功能不工作
- 16. 使用JavaScript和Canvas繪製形狀
- 17. 開始畫布繪製隨機位置。多個文字繪製
- 18. 如何繪製形狀如下的UIButton?
- 19. 如何隨意使用畫布繪製?
- 20. 柔性帆布上的繪製方塊
- 21. 帆布聚合區域未被繪製
- 22. 繪製單個像素W /帆布
- 23. 帆布文本不繪製的圖像
- 24. Tkinter帆布繪製風玫瑰
- 25. 如何使用HTML畫布繪製任意形狀?
- 26. 如何爲繪製的畫布形狀設置ID?
- 27. 如何繪製畫布形狀之間的對角線
- 28. 如何繪製連接的隨機線?
- 29. 其中的JavaScript包提供了一個豐富的對象模型對HTML5繪製不同形狀的帆布
- 30. Javascript畫布繪製矩形或圓圈
創建每個形狀的功能,把這些功能放到一個數組,並調用任意形狀製造商與隨機指標,隨機還不夠嗎? – Teemu
請向我們展示您嘗試過的內容,以便了解您想要實現的目標。 – Jordumus
這只是一個隨機問題,與canvas無關,將所有形狀存儲在數組上,從數組中繪製函數,並且每次發送不同的數組索引。 – Kriggs