Используя Canvas, как нарисовать фигуру X-времен, введенную пользователем? - PullRequest
Новая
       5

Используя Canvas, как нарисовать фигуру X-времен, введенную пользователем?

0 голосов
/ 21 марта 2019

Я пытаюсь нарисовать 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-й прямоугольник цветом, введенным пользователем?

1 Ответ

1 голос
/ 21 марта 2019

Используйте массив для создания ваших прямоугольников, затем используйте оператор 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...