我正在尝试绘制 30 个矩形，第 n 个矩形是用户输入的数字。每个第 n 个矩形都是用户输入的颜色。以下是我的内容:
<script>
let n = document.getElementById("number")
let colors = document.getElementById("color")
function drawRectangle() {
let a = n.value
let b = colors.value
document.getElementById("output").innerHTML = "Every " + a + " rectangle is " + b;
myShape();
}
function myShape() {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let x;
let y;
ctx.beginPath();
ctx.lineTo(0,0);
ctx.lineTo(10,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
ctx.strokeRect(0,0,10,10);
ctx.strokeRect(10,0,10,10);
ctx.strokeRect(20,0,10,10);
ctx.strokeRect(30,0,10,10);
ctx.strokeRect(40,0,10,10);
ctx.strokeRect(50,0,10,10);
ctx.strokeRect(60,0,10,10);
ctx.strokeRect(70,0,10,10);
ctx.strokeRect(80,0,10,10);
ctx.strokeRect(90,0,10,10);
ctx.strokeRect(100,0,10,10);
ctx.strokeRect(110,0,10,10);
ctx.strokeRect(120,0,10,10);
ctx.strokeRect(130,0,10,10);
ctx.strokeRect(140,0,10,10);
ctx.strokeRect(150,0,10,10);
ctx.strokeRect(160,0,10,10);
ctx.strokeRect(170,0,10,10);
ctx.strokeRect(180,0,10,10);
ctx.strokeRect(190,0,10,10);
ctx.strokeRect(200,0,10,10);
ctx.strokeRect(210,0,10,10);
ctx.strokeRect(220,0,10,10);
ctx.strokeRect(230,0,10,10);
ctx.strokeRect(240,0,10,10);
ctx.strokeRect(250,0,10,10);
ctx.strokeRect(260,0,10,10);
ctx.strokeRect(270,0,10,10);
ctx.strokeRect(280,0,10,10);
ctx.strokeRect(290,0,10,10);
ctx.strokeRect(300,0,10,10);
}
document.getElementById("display").onclick = drawRectangle;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> CPSC 1045 Midterm 2 Practical Exam </title>
</head>
<body>
<h1>Let's Display Some Rectangles</h1>
<p>This application will diplay a series of rectangles on the screen, filling every Nth rectangle with the specified colour</p>
<p>Enter a number for N:<input type="number" id="number" max="30"></p>
<p>Enter the color: <input type="color" id="color"></p>
<button id="display">Display</button>
<p id="output">Output here</p>
<canvas id="myCanvas" height="50" width="300" style="border: 1px solid black">如何获取用户输入的值和颜色，并使每个第n个矩形成为用户输入的颜色？
最佳答案
使用数组来制作矩形，然后使用模运算符选择其中的每个第 n 项并将其绘制为最终用户想要的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> CPSC 1045 Midterm 2 Practical Exam </title>
</head>
<body>
<h1>Let's Display Some Rectangles</h1>
<p>This application will diplay a series of rectangles on the screen, filling every Nth rectangle with the specified
colour</p>
<p>Enter a number for N:<input type="number" id="number" max="30"></p>
<p>Enter the color: <input type="color" id="color"></p>
<button id="display">Display</button>
<p id="output">Output here</p>
<canvas id="myCanvas" height="50" width="300" style="border: 1px solid black"></canvas>
<script>
let n = document.getElementById("number")
let colors = document.getElementById("color")
function drawRectangle() {
let a = n.value
let b = colors.value
document.getElementById("output").innerHTML = "Every " + a + " rectangle is " + b;
myShape(a, b);
}
function myShape(a, b) {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let x = 0;
let y = 0;
var rectArr = [];
ctx.beginPath();
ctx.lineTo(0,0);
ctx.fillStyle = b;
for (var i = 0; i < 30; i++) {
if (i%a == 0) {
ctx.fillRect(x, 0, 10, 10);
x += 10;
} else {
ctx.strokeRect(x, 0, 10, 10);
x += 10;
}
}
ctx.fill();
ctx.stroke();
}
document.getElementById("display").onclick = drawRectangle;
</script>
</body>
</html>关于javascript - 使用Canvas，如何绘制用户输入X次的形状？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55287851/