使用Canvas，如何绘制用户输入的X倍形状？

Question

I'm trying to draw 30 rectangles and the n-th rectangle is the number entered by the user. 我正在尝试绘制30个矩形，第n个矩形是用户输入的数字。 Every n-th rectangle will be a color entered by the user. 每个第n个矩形将是用户输入的颜色。 Here's what I have below: 这是我下面的内容：

 <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">

How do you get the value and color entered by the user and make every n-th rectangle the color entered by the user? 如何获得用户输入的值和颜色，并使每个第n个矩形成为用户输入的颜色？

Answer 1

Use an array to make your rectangles, then use the Modulo operator to select each nth item in and paint it the color that the end user wants. 使用数组制作矩形，然后使用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>

使用Canvas，如何绘制用户输入的X倍形状？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-03-21 20:03:07

使用Canvas，如何绘制用户输入的X倍形状？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-03-21 20:03:07

解决方案1
1 已采纳 2019-03-21 20:03:07