DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
*{
margin: 0;
padding: 0;
}
style>
<body>
<div class="box">
<canvas class="canvas" id="canvas">canvas>
div>
body>
<script>
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext('2d')
let w = document.documentElement.clientWidth - 6;
let h = document.documentElement.clientHeight -6;
canvas.width = w
canvas.height = h
function Ball (x, y, r){
this.x = x
this.y = y
this.r = 30
this.color = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'))
}
Ball.prototype.show = function() {
this.r--
yuan(ctx, this.x, this.y, this.r, 0, Math.PI * 2, true, this.color, this.color, "1px")
}
let ball_array = []
window.onmousemove = function(e) {
let x = e.x
let y = e.y
let ball = new Ball(x, y)
ball_array.push(ball)
ball.show()
}
setInterval(function() {
ctx.clearRect(0, 0, w, h)
for(let i =0; i<ball_array.length;i++) {
if(ball_array[i].r <= 0) {
ball_array.splice(i, 1)
}else{
ball_array[i].show()
}
}
}, 10)
function text(ctx, txt, x, y, fontsize,textAlign, textBaseline) {
ctx.font = `${fontsize}px 宋体`
ctx.textAlign = textAlign
ctx.textBaseline = textBaseline
ctx.fillStyle = "#000"
ctx.fillText(txt, x, y )
}
function yuan(ctx, x, y, r, start, end, xiang = true, linecolor, fillcolor, linewidth = "1px") {
ctx.beginPath()
ctx.arc(x, y, r, start, end, xiang)
ctx.lineWidth = linewidth
ctx.fillStyle = fillcolor === undefined? "glob" : fillcolor;
ctx.fill()
ctx.strokeStyle = linecolor === undefined? "glob" : linecolor;
ctx.stroke()
}
function can(ctx, startx, starty, endx, endy, color, width) {
ctx.beginPath()
ctx.moveTo(startx, starty)
ctx.lineTo(endx, endy)
ctx.strokeStyle = color;
ctx.lineWidth = width
ctx.lineCap = "round"
ctx.stroke()
ctx.closePath()
}
script>
html>