我创建了一个小应用程序来在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次点。 那么我应该在这段代码中改变什么?
答案 0 :(得分:2)
在这里,检查一下: 我重新组织了你的代码并创建了一个新函数,用随机颜色生成10个随机点。
//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;
答案 1 :(得分:0)
我尝试实施您的想法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];