HTML5 Canvas - 输入类型范围答案

【问题标题】：HTML5 Canvas - Input type RangeHTML5 Canvas - 输入类型范围
【发布时间】：2016-01-18 00:46:01
【问题描述】：

我是 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 个正方形。

【问题讨论】：

请告诉我们canvasDrawsTriangle函数。
刚刚做了，我编辑了帖子让你可以看到它

标签： javascript html canvas

【解决方案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>

【讨论】：