Question

我创建了一个小应用程序来在HTML画布元素上创建点。在这里，我编写了用于在画布上绘制多色点的代码。

我创建了一个按钮来改变点的颜色，另一个按钮用于在一行中对点进行排序。

一切都很完美。

"use strict";

//Canvas and context
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),

//Buttons
    randColBtn = document.getElementById('randColBtn'),
    randPosBtn = document.getElementById('randPosBtn'),
    sortDotsBtn = document.getElementById('sortDotsBtn'),

//Globals
    dots = [],
    color = '#AAAAAA';

//Constants
const DOT_RADIUS = 20;


//Dot constructor
var Dot = function(x, y, c) {
  this.x = x;
  this.y = y;
  this.color = c;

  this.draw = function() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x-DOT_RADIUS/2, this.y-DOT_RADIUS/2, DOT_RADIUS, 0, 2 * Math.PI);
    ctx.fill();
  }
}

//Checks if the mouse has clicked within the boundaries of an existing dot
var isOverlap = function(d) {
  for (var i = dots.length - 1; i >= 0; i--) {
    let normalizedX = d.x - dots[i].x,
        normalizedY = d.y - dots[i].y;
    if (-DOT_RADIUS < normalizedX && normalizedX < DOT_RADIUS && -DOT_RADIUS < normalizedY && normalizedY < DOT_RADIUS) {
      dots.splice(i,1);
      return true;
    }
  }
  return false;
}


//Event listeners
canvas.addEventListener("click", function(e) {  
  var dot = new Dot(e.clientX,e.clientY,color);
  if (!isOverlap(dot)) {
    dot.draw();
    dots.push(dot);
  } else {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (var i = 0; i < dots.length; i++) {
      dots[i].draw();
    }
  }
});

randColBtn.addEventListener("click", function(e) {
  color = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
});

randPosBtn.addEventListener("click", function(e) {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for (var i = 0; i < dots.length; i++) {
    dots[i].x = Math.random()*canvas.width;
    dots[i].y = Math.random()*canvas.height;
    dots[i].draw();
  }
});

sortDotsBtn.addEventListener("click", function(e) {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for (var i = 0; i < dots.length; i++) {
    dots[i].x = 2*DOT_RADIUS*i%canvas.width + 3/2*DOT_RADIUS;
    dots[i].y = Math.floor(2*DOT_RADIUS * i/canvas.width) * 2*DOT_RADIUS + 3/2*DOT_RADIUS;
    dots[i].draw();
  }
});

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">
  <title>DOT CLICKER</title>

  <style>
    #canvas {
      border: thin solid black;
    }
  </style>

</head>

<body>

  <canvas id="canvas" width=600 height=400></canvas>
  <div>
    <button id="randColBtn" type="button">Randomize Colour</button>
    <button id="randPosBtn" type="button">Randomize Position</button>
    <button id="sortDotsBtn" type="button">Sort Dots</button>
  </div>

  <script src="dots.js"></script>

</body>

</html>

现在我想创建一个递归函数，用不同的颜色绘制10次点。那么我应该在这段代码中改变什么？

Answer 1

在这里，检查一下：我重新组织了你的代码并创建了一个新函数，用随机颜色生成10个随机点。

＆＃13;

//Canvas and context
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),

//Buttons
    randColBtn = document.getElementById('randColBtn'),
    randPosBtn = document.getElementById('randPosBtn'),
    sortDotsBtn = document.getElementById('sortDotsBtn'),

//Globals
    dots = [],
    color = '#AAAAAA';

//Constants
const DOT_RADIUS = 20;


//Dot constructor
var Dot = function(x, y, c) {
  this.x = x;
  this.y = y;
  this.color = c;

  this.draw = function() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x-DOT_RADIUS/2, this.y-DOT_RADIUS/2, DOT_RADIUS, 0, 2 * Math.PI);
    ctx.fill();
  }
}

//Checks if the mouse has clicked within the boundaries of an existing dot
var isOverlap = function(d) {
  for (var i = dots.length - 1; i >= 0; i--) {
    let normalizedX = d.x - dots[i].x,
        normalizedY = d.y - dots[i].y;
    if (-DOT_RADIUS < normalizedX && normalizedX < DOT_RADIUS && -DOT_RADIUS < normalizedY && normalizedY < DOT_RADIUS) {
      dots.splice(i,1);
      return true;
    }
  }
  return false;
}


//Event listeners
function canvasClick(e) {
    var dot = new Dot(e.clientX,e.clientY,color);
    if (!isOverlap(dot)) {
        dot.draw();
        dots.push(dot);
    } else {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for (var i = 0; i < dots.length; i++) {
            dots[i].draw();
        }
    }
}
canvas.addEventListener("click", canvasClick,event);

function rndColor() {
    color = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
}
randColBtn.addEventListener("click", rndColor);

function rndPosition() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (var i = 0; i < dots.length; i++) {
        dots[i].x = Math.random()*canvas.width;
        dots[i].y = Math.random()*canvas.height;
        dots[i].draw();
    }
}
randPosBtn.addEventListener("click", rndPosition);

function sortDots() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (var i = 0; i < dots.length; i++) {
        dots[i].x = 2*DOT_RADIUS*i%canvas.width + 3/2*DOT_RADIUS;
        dots[i].y = Math.floor(2*DOT_RADIUS * i/canvas.width) * 2*DOT_RADIUS + 3/2*DOT_RADIUS;
        dots[i].draw();
    }
}
sortDotsBtn.addEventListener("click", sortDots);
function randDots(i) {
debugger;
    rndColor();
    canvasClick(0,0);
    if (i==0){
        rndPosition();
        return;
    }
    randDots(--i);
}
randDotsBtn.addEventListener("click", function () {
    randDots(10);
});

＆＃13;

 #canvas {
      border: thin solid black;
    }

＆＃13;

<canvas id="canvas" width=600 height=400></canvas>
  <div>
    <button id="randColBtn" type="button">Randomize Colour</button>
    <button id="randPosBtn" type="button">Randomize Position</button>
    <button id="sortDotsBtn" type="button">Sort Dots</button>
    <button id="randDotsBtn" type="button">Rand Dots</button>
  </div>

＆＃13;

Answer 2

我尝试实施您的想法HERE in JSBin。您可以调整点数和弹跳值

// dots qty
var limit = 10;
// random bouncing value
var bouncing = [-100, 100];
var rand = (min, max) => ~~(Math.random() * (max - min + 1)) + min;
// randomize you color 
var randColor = ()=> "rgb(" + ~~(Math.random()*256) + "," + ~~(Math.random()*256) + "," + ~~(Math.random()*256) + ")";

// generate list of random dots
var newDots = [...Array(limit||0)]
    .map((v,i) => new Dot(
         e.clientX + rand.apply(null, bouncing),
         e.clientY + rand.apply(null, bouncing),
         randColor() 
    ))
// draw new dots
newDots.forEach(dot=>dot.draw());
//extend global dots
dots = [...dots, ...newDots];

使用递归函数使用javascript

2 个答案: