Question

我是HTML5编程的新手。我有我需要为我的大学做的这个项目，但是，我的教授从未提及输入类型Range，我需要它。我需要用三角形制作一个正方形，每行需要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>

HTML5 Canvas - 输入类型范围

1 个答案: