|
Мои пузырьки бликают можете помоч
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#c1 {
background-color: rgba(255, 255, 255, 0);
}
</style>
</head>
<body>
<canvas id="c1" width="1000" height="500"></canvas>
<input type="color" id="inpcolor">
<button id="button1">Clear</button>
<button id="Start">Start</button>
<script>let v= 50;
let canvas = document.getElementById('c1');
let ctx = canvas.getContext('2d');
let color = 'blue';
let round = document.getElementById('round');
let pi = Math.PI;
document.getElementById('Start').onclick = function(){
setInterval(() => {
Start();
}, 1000);
}
function Start(event){
let x = Math.floor(Math.random()*(1000-1));
let y = Math.floor(Math.random()*(500-1));
let index=0;
let randR = Math.floor(Math.random()*(255-1)+1);
let randB = Math.floor(Math.random()*(255-1)+1);
let randG = Math.floor(Math.random()*(255-1)+1);
let buble = setInterval(() => {
index+=0.3;
ctx.beginPath();
ctx.lineWidth = 13;
ctx.globalCompositeOperation = 'destinaion-over';
ctx.strokeStyle ='rgb('+randR+','+randB+','+randG+')';
ctx.fillStyle = '#FFFFFF';
ctx.arc(x,y,index,0,pi*2);
ctx.stroke();
ctx.fill();
ctx.closePath();
if (index>=200) {
ctx.beginPath();
ctx.lineWidth = 13;
ctx.globalCompositeOperation = 'destinaion-over';
ctx.strokeStyle ='#FFFFFF';
ctx.fillStyle = '#FFFFFF';
ctx.arc(x,y,index+1,0,pi*2);
ctx.stroke();
ctx.fill();
ctx.closePath();
clearInterval(buble);
}
}, 10);
}
</script>
</html>
|
