HTML5画布 - 输入类型范围

Question

我是HTML5编程新手。我有这个项目，我需要为我的大学，但是，我的教授从来没有提到输入类型范围，我需要它。我需要从三角形中划出一个正方形，每行需要1到30个正方形。这是我的代码。

function canvasDrawsTriangle(corFundo,corLinha, x0,y0,x1,y1,x2,y2){ 
    pintor.fillStyle=corFundo; 
    pintor.strokeStyle=corLinha; 
    pintor.beginPath(); 
    pintor.moveTo(x0,y0); 
    pintor.lineTo(x1,y1); 
    pintor.lineTo(x2,y2); 
    pintor.closePath(); 
    pintor.stroke(); 
    pintor.fill(); 

function drawSquare(x, y, size) { 
var centerX = x + size/2; 
var centerY = y + size/2; 
var farX = x + size; 
var farY = y + size; 
canvasDrawsTriangle("#449779", "#449779", centerX, centerY, x, y, x, farY); 
canvasDrawsTriangle("#E6B569", "#E6B569", centerX, centerY, x, y, farX, y); 
canvasDrawsTriangle("#AA8D49", "#AA8D49", centerX, centerY, farX, y, farX, farY); 
canvasDrawsTriangle("#013D55", "#013D55", centerX, centerY, x, farY, farX, farY); 

，而不是每行绘制多个平方，我有这样的功能：

function drawMultipleSquares(x, y, size, horizontalCount, verticalCount) { 
    for (var i = 0; i < horizontalCount; i++) { 
     for (var j = 0; j < verticalCount; j++) { 
      drawSquare(x + i * size, y + j * size, size); 

有了这个代码，我只需要调用我的函数在脚本像这样：

drawMultipleSquares(0, 0, 500/30, 30, 30); 

让我改变每次我在画布上想要更多或更少的方块时手动调整大小变量。我想插入一个滑块来控制该变量，我不知道该怎么做！请帮忙。 注意：画布必须是500x500，所以如果大小设置为500，则会制作一个大方形，如果大小为500/30，则会使每行30个方格。

Answer 1

var pintor = document.getElementById('mycanvas').getContext('2d'); 
 
function canvasDrawsTriangle(corFundo,corLinha, x0,y0,x1,y1,x2,y2){ 
 
    pintor.fillStyle=corFundo; 
 
    pintor.strokeStyle=corLinha; 
 
    pintor.beginPath(); 
 
    pintor.moveTo(x0,y0); 
 
    pintor.lineTo(x1,y1); 
 
    pintor.lineTo(x2,y2); 
 
    pintor.closePath(); 
 
    pintor.stroke(); 
 
    pintor.fill(); 
 
} 
 

 
function drawSquare(x, y, size) { 
 
    var centerX = x + size/2; 
 
    var centerY = y + size/2; 
 
    var farX = x + size; 
 
    var farY = y + size; 
 
    canvasDrawsTriangle("#449779", "#449779", centerX, centerY, x, y, x, farY); 
 
    canvasDrawsTriangle("#E6B569", "#E6B569", centerX, centerY, x, y, farX, y); 
 
    canvasDrawsTriangle("#AA8D49", "#AA8D49", centerX, centerY, farX, y, farX, farY); 
 
    canvasDrawsTriangle("#013D55", "#013D55", centerX, centerY, x, farY, farX, farY); 
 
} 
 

 
function drawMultipleSquares(x, y, size, horizontalCount, verticalCount) { 
 
    for (var i = 0; i < horizontalCount; i++) { 
 
    for (var j = 0; j < verticalCount; j++) { 
 
     drawSquare(x + i * size, y + j * size, size); 
 
    } 
 
    } 
 
} 
 

 
drawMultipleSquares(0, 0, 500/30, 30, 30); 
 

 
function change(elm) { 
 
    var val = document.querySelector('#horizontal').value; 
 
    drawMultipleSquares(0, 0, 500/val, val , val); 
 
    document.querySelector('#range').innerHTML = val; 
 
}

<input type="range" onchange="change()" id="horizontal" /><span id="range"></span> 
 
<hr /> 
 
<canvas id="mycanvas" width="500" height="500"></canvas>