Javascript HTML5画布-输入类型范围

我是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);

每当我想在画布中增加或减少正方形时，让我手动更改大小变量。我想插入一个滑块来控制这个变量，但我不知道怎么做！请帮忙。 注意：画布必须为500x500，因此如果大小设置为500，则生成一个大正方形，如果大小为500/30，则每行生成30个正方形

var pintor=document.getElementById（'mycanvas'）.getContext（'2d'）；
功能画布角度（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（）；
}
功能drawSquare（x、y、尺寸）{
var centerX=x+大小/2；
变量centerY=y+size/2；
var farX=x+大小；
var farY=y+尺寸；
画布角度（“#449779”，“#449779”，centerX，centerY，x，y，x，farY）；
画布角度（“E6B569”、“E6B569”、centerX、centerY、x、y、farX、y）；
画布角度（“AA8D49”，“AA8D49”，centerX，centerY，farX，y，farX，farY）；
画布角度（“013D55”、“013D55”、centerX、centerY、x、farY、farX、farY）；
}
函数DrawMultipleSquare（x、y、大小、水平计数、垂直计数）{
对于（变量i=0；i

var pintor=document.getElementById（'mycanvas'）.getContext（'2d'）；
功能画布角度（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（）；
}
功能drawSquare（x、y、尺寸）{
var centerX=x+大小/2；
变量centerY=y+size/2；
var farX=x+大小；
var farY=y+尺寸；
画布角度（“#449779”，“#449779”，centerX，centerY，x，y，x，farY）；
画布角度（“E6B569”、“E6B569”、centerX、centerY、x、y、farX、y）；
画布角度（“AA8D49”，“AA8D49”，centerX，centerY，farX，y，farX，farY）；
画布角度（“013D55”、“013D55”、centerX、centerY、x、farY、farX、farY）；
}
函数DrawMultipleSquare（x、y、大小、水平计数、垂直计数）{
对于（变量i=0；i

请向我们展示

canvassdrawstriangle

功能。刚刚做的，我编辑了帖子，所以你可以看到它。请向我们展示

canvassdrawstriangle

功能。刚刚做的，我编辑了帖子，所以你可以看到它

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