HTML5画布-输入类型范围

Question

I'm new to HTML5 programming. I have this project I need to make for my university, however, my professor never mention the input type Range and I need it. I need to make a square out of triangles, and it needs to be from 1 to 30 squares per line. Here's the code I have.

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

Than to draw multiple squares per line i have this function:

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

With this code I just call my function in the Script like so:

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

Making me change manually the size variable everytime I want more or less squares in my canvas. I would like to insert a slider to controll that variable and I have no idea how to do it! Please help. NOTE: The canvas has to be 500x500 so if the size is set to 500 it makes one big square, if the size is 500/30 it makes 30 squares per line.

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>