使用画布，如何绘制用户输入的 X 次形状

我正在尝试绘制 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 个矩形成为用户输入的颜色？

使用数组制作矩形，然后使用 Modulo 运算符选择其中的第 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>

相关内容

最新更新

热门标签：