canvas实现曲线拖影动画效果代码-html代码-BFW代码库

canvas实现曲线拖影动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现曲线拖影动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	cursor: pointer;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="c"></canvas>
<!-- partial -->
  <script  >
      class Point {
	constructor(i) {
		this.i = i;
		this.x = 0;
		this.y = 0;
		this.vx = 0;
		this.vy = 0;
	}
}

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const width = canvas.offsetWidth * 1;
const height = canvas.offsetHeight * 1;
canvas.width = width;
canvas.height = height;
canvas.onclick = init;

const points = [];
let frame = 0, running = true;
for (let i = 0; i < 32; i++) points.push(new Point(i));
const first = points[0], last = points[points.length - 1];
ctx.globalCompositeOperation = ".........完整代码请登录后点击上方下载按钮下载查看