Question

我必须制作一些可以用表格手动填写矩形高度的东西。

所以这意味着：如果我将第一个形式的输入量改为10，那么第一个矩形的高度必须为10。

for (var i = 0; i < 5; i++) {
        var height = -Math.random()*450;
        ctx.fillStyle = "#76DCDC";
        ctx.fillRect(16+i*100,400,60,height);
}

使用此代码，每次按下提交按钮，我都会生成一个随机高度。但是我需要代码来手动填充5个不同矩形中的每个矩形。

这是我到目前为止所拥有的。但它仍然非常混乱。

＆＃13;

	var amount = [];
	var canvas = document.getElementById("canvas");
	
	if(canvas.getContext){ 
		var ctx = canvas.getContext("2d");
		var hoeveelheid = 0;
 

		var emmer = new Image();
		emmer.addEventListener("load",drawDrop );
		emmer.src = "assets/pot_s.png";
	}else{
	}

	
	function draw(){
		ctx.fillStyle = '#FFF';
		ctx.fillRect(0,0,canvas.width, canvas.height);
	}

	
	function amountChange(){
		console.log("change amount");
		var form = document.getElementById("form");

		for(var i = 0; i < form.length; i++){
			amount[i] = form[i].value;
		}
		draw();
	}

	
	function drawDrop() {
	ctx.fillStyle="#FFF"
	ctx.fillRect(0,0,canvas.width,canvas.height);

		for (var i = 0; i < 5; i++) {
   		var height = -Math.random()*450;
		ctx.fillStyle = "#76DCDC";
		ctx.fillRect(17+i*100,410,60,height);
		}

		for (var i = 0; i < 5; i++){
			ctx.drawImage(emmer,i*100,400);
		}

		hoeveelheid ++;
		if (hoeveelheid == 8) {
			hoeveelheid = 1;
		}
	}


	function randomize(){
		console.log("random amount");

		var form = document.getElementById("form");

		for(var i = 0; i < form.length; i++){
			form[i].value = Math.round(Math.random()*25)*5;
		}

		amountChange();
	}


	function calculate() {
		console.log("bereken gegevens");
		
	}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>CPII</title>
	<link rel="stylesheet" type="text/css" href="screen.css">
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<div>
		<h1>Watergebruik</h1>
		<p>Hoeveel minuten heb je vandaag ... gebruikt?</p>

		<form id="form" method="post">

		De wc: <input type="number" name="wc" step="5" min="0" max="255"><br>
		De douche: <input type="number" name="douche" step="5"  min="0" max="255" ><br>
		De lavabo: <input type="number" name="lavabo" step="5"  min="0" max="255" ><br>
		De keukenkraan: <input type="number" name="keukenkraan" step="5"  min="0" max="255"><br>
		De wasmachine: <input type="number" name="wasmachine" step="5"  min="0" max="255"><br>
		De vaatwas: <input type="number" name="vaatwas" step="5"  min="0" max="255"><br>

		<button onclick="calculate()">See the results</button>
		<button onclick="randomize()">Random numbers</button>

		</form>
	</div>
	<script src="js/script.js"></script>
</body>
</html>

＆＃13;

Answer 1

首先，您需要获取表单输入的值。我在这里使用jquery作为一个简单的例子。

for (var i = 0; i < 5; i++) {
 var height = document.getElementById('#input' + i).value;
 ctx.fillStyle = "#76DCDC";
 ctx.fillRect(16+i*100,400,60,height);
}

这适用于所有4个输入。输入的ID必须是＆＃34; input1＆＃34; - ＆＃34;输入4＆＃34;

通过表单输入设置rect的高度

1 个答案: