JavaScript随机圈圈示例
<body>
<button>Update</button>
<canvas></canvas>
<script>
const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let WIDTH = document.documentElement.clientWidth;
let HEIGHT= document.documentElement.clientHeight;
canvas.width = WIDTH;
canvas.height = HEIGHT;
function random(number) {
return Math.floor(Math.random()*number);
}
function draw(){
ctx.clearRect(0,0, WIDTH, HEIGHT);
for (let i = 0; i < 100; i++) {
ctx.beginPath();
ctx.fillStyle = `rgba(${random(255)}, ${random(255)}, ${random(255)}, 0.5)`;
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2* Math.PI);
ctx.fill();
}
}
draw();
btn.addEventListener('click', draw);
</script>
</body>
阅读量: 497
发布于:
修改于:
发布于:
修改于: