我需要在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.