使用Canvas，如何繪制用戶輸入的X倍形狀？
[英]Using Canvas, how to draw a shape X-times entered by the user?
問題描述
我正在嘗試繪制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
1 已采納 2019-03-21 20:03:07
使用數組制作矩形，然后使用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>
通過JavaScript使用Canvas，如何在Y參數內繪制X次圖片？
[英]Using Canvas via JavaScript, how can I draw a picture X number of times and within Y parameters?
如何使用Ionic的畫布在照片頂部繪制照片然后繪制形狀？
[英]How to draw a photo then a shape on top of the photo using a canvas in Ionic?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.