我需要在html畫布中堆疊多個隨機顏色的矩形
[英]I need to stack multiple randomly colored rectangles in html canvas
問題描述
我想讓hella堆疊的矩形到達畫布的中心並讓它們全部隨機着色，但是我的代碼是錯誤的並且無法正常工作。
這是我的代碼：
var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;
function drawrectangles() {
ctx.beginPath;
ctx.rect(cornerpad, cornerpad, rectwidth, rectheight);
ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
ctx.fill();
ctx.closePath;
}
while(rectheight > 5) {
rectheight =- 10;
rectwidth =- 10;
cornerpad++;
drawrectangles();
}
我很確定我使while循環錯誤，因為隨機顏色工作和繪圖矩形工作。 請幫助解釋我做錯了什么
3 個解決方案
解決方案1
2 已采納 2019-02-12 01:09:17
你的代碼中有一些錯誤。 首先，你有rectheight =- 10; 而不是rectheight -= 10 。 你的代碼行實際上等於rectheight = -10 ，所以你只是將兩個變量都設置為-10，而不是將它們減少10。
然后，您使用fill而不是fillRect 。 他們之間有一個很好的區別，你可以在這里或這里閱讀更多。 fillRect是一個“獨立”命令，用於繪制和填充矩形。 因此，如果您使用多個fillStyle命令發出多個fillRect命令，則每個新的rect將使用前面的fillstyle填充。
為了獲得更好的效果，我建議使用strokeRect而不是rect ，但這是您的決定。 此外，您可能希望從while中播放條件，以實際使它們顯示為居中。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var cornerpad = 0; var rectwidth = 790; var rectheight = 590; function drawrectangles() { ctx.beginPath(); ctx.rect(cornerpad, cornerpad, rectwidth, rectheight); ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'; ctx.fill(); ctx.stroke(); } while (rectheight > 5) { rectheight -= 10; rectwidth -= 10; cornerpad += 10; //console.log(`(h, w)=(${rectheight}, ${rectwidth})`); drawrectangles(); }
canvas { border: 1px dotted black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script> <canvas id="canvas" width="790" height="590"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
編輯：我添加了一個更好的繪制版本，請查看:)
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var cornerpad = 0; var rectwidth = 600; var rectheight = 400; var middleLine = rectheight / 2; function drawrectangles() { ctx.strokeRect(cornerpad, cornerpad, rectwidth, rectheight); ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)' ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight); } while (cornerpad < middleLine) { rectheight -= 20; rectwidth -= 20; cornerpad += 10; //console.log(`(h, w)=(${rectheight}, ${rectwidth})`); drawrectangles(); }
canvas { border: 1px dotted black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script> <canvas id="canvas" width="600" height="400"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
干杯!
編輯2：因為我太beginPath於=- 10事情，我忘了指出實際使用beginPath和closePath作為函數並將它們稱為ctx.beginPath()和ctx.closePath() 。 感謝Kaiido指出了這兩個工作的額外jsfiddles。
解決方案2
1 2019-02-12 01:04:52
我相信你的問題在於這個表達式=-你的意思是-= 。 你現在正在做的是將rectheight值設置為-10而不是將其減少10，因此你的while循環只執行一次。
解決方案3
1 2019-02-12 01:09:48
你錯過了一些關閉括號，並且錯誤地使用了= - 。 我也改變了矩形直接填補。
var ctx = canvas.getContext("2d"); var cornerpad = 0; var rectwidth = 790; var rectheight = 590; function drawrectangles() { ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)' ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight); } while(rectheight > 5) { rectheight -= 10; rectwidth -= 10; cornerpad++; drawrectangles(); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id='canvas' height=590 width=790></canvas> </body> </html>
HTML畫布-循環繪制多個矩形
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.