Я работаю над страницей, которая может создавать разные цвета. Это еще не полный код, так как он застрял сейчас.
В основном предполагается, что внутри холста будут подпрыгивать несколько кругов с разными цветами, однако «onclick» не может вызвать круг на холст. Было бы здорово, если бы информационный сайт также поделился со мной.
var canvas;
var ctx;
var w = 1100;
var h = 600;
setUpCanvas();
document.querySelector("#button").onclick=click;
function click(){
var a1 = document.querySelector("#a1").value;
var a2 = document.querySelector("#a2").value;
var a3 = document.querySelector("#a3").value;
var o1 = {
"x": rand(w),
"dx": randn(10),
"y": rand(h),
"dy": randn(10),
"r": 30,
"red": document.querySelector("#Red1").value,
"green": document.querySelector("#Green1").value,
"blue": document.querySelector("#Blue1").value,
"a": a1/100,
"n": document.querySelector("#Ncircle1").value
};
var o2 = {
"x": rand(w),
"dx": randn(10),
"y": rand(h),
"dy": randn(10),
"r": 30,
"red": document.querySelector("#Red2").value,
"green": document.querySelector("#Green2").value,
"blue": document.querySelector("#Blue2").value,
"a": a2/100,
"n": document.querySelector("#Ncircle2").value
};
var o3 = {
"x": rand(w),
"dx": randn(10),
"y": rand(h),
"dy": randn(10),
"r": 30,
"red": document.querySelector("#Red3").value,
"green": document.querySelector("#Green3").value,
"blue": document.querySelector("#Blue3").value,
"a": a3/100,
"n": document.querySelector("#Ncircle3").value
};
for(i=0; i<o1.n; i++){
circle(o1)
};
for(i=0; i<o2.n; i++){
circle(o2)
};
for(i=0; i<o3.n; i++){
circle(o3)
};
o1.x += o1.dx;
o1.y += o1.dy;
if(o1.x > w - o1.r || o1.x < 0){
o1.x *= -1;
};
if(o1.y < h - o1.r || o1.y < 0){
o1.y *= -1;
};
o2.x += o2.dx;
o2.y += o2.dy;
if(o2.x > w - o2.r || o2.x < 0){
o2.x *= -1;
};
if(o2.y < h - o2.r || o2.y < 0){
o2.y *= -1;
};
o3.x += o3.dx;
o3.y += o3.dy;
if(o3.x > w - o3.r || o3.x < 0){
o3.x *= -1;
};
if(o3.y < h - o3.r || o3.y < 0){
o3.y *= -1;
};
if(o1.n < 0 ||o2.n<0||o3.n<0){
console.log("Number can not be negative.")
};
circleColour(o1);
circleColour(o2);
circleColour(o3);
console.log(o1.n,o1.red,o1.green,o1.blue,o1.a);
}
function circle(x,y,r,red,green,blue,a){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle = "rgba("+red+","+green+","+blue+","+a+")";
ctx.fill();
}
function circleColour(o){
for(i=0; i<o.n; i++){
circle(o)
updateData(o);
}
}
function randi(r){
return Math.floor(Math.random()*r)
}
function rand(r){
return Math.random()*r
}
function randn(r){
return Math.random()*r - r/2
}
function setUpCanvas(){
canvas = document.querySelector("#mycanvas");
ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
canvas.style.border = "5px solid blue";
}
console.log("Colour Mix");
#container{
margin: auto;
width: 80%;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="colourmix.css">
</head>
<body>
<div id="container">
<h1>Colour Mix</h1>
<canvas id="mycanvas"></canvas>
<form id="myform">
<label for="Ncircle1">Number of Group 1 circles</label>
<input type="number" id="Ncircle1">
<label for="Red1">Red</label>
<input type="number" id="Red1">
<label for="Green1">Green</label>
<input type="number" id="Green1">
<label for="Blue1">Blue</label>
<input type="number" id="Blue1">
<label for="a1">Opacity</label>
<input type="number" id="a1">
<label for="Ncircle2">Number of Group 2 circles</label>
<input type="number" id="Ncircle2">
<label for="Red2">Red</label>
<input type="number" id="Red2">
<label for="Green2">Green</label>
<input type="number" id="Green2">
<label for="Blue2">Blue</label>
<input type="number" id="Blue2">
<label for="a2">Opacity</label>
<input type="number" id="a2">
<label for="Ncircle3">Number of Group 3 circles</label>
<input type="number" id="Ncircle3">
<label for="Red3">Red</label>
<input type="number" id="Red3">
<label for="Green3">Green</label>
<input type="number" id="Green3">
<label for="Blue3">Blue</label>
<input type="number" id="Blue3">
<label for="a3">Opacity</label>
<input type="number" id="a3">
<!-- <input type="submit" id="submit" value="Submit"> -->
<button type="button" onclick="submit">Submit</button>
</form>
</div>
<script src="colourmix.js"></script>
</body>
</html>