用html制作粒子线条,html5 canvas跟随鼠标粒子线条动画特效

特效描述:html5 canvas 跟随鼠标 粒子线条动画特效,html5 基于canvas制作鼠标移动粒子线条动画

代码结构

1. HTML代码

// One of my first experiments, woop! :D

var SCREEN_WIDTH = window.innerWidth;

var SCREEN_HEIGHT = window.innerHeight;

var RADIUS = 70;

var RADIUS_SCALE = 1;

var RADIUS_SCALE_MIN = 1;

var RADIUS_SCALE_MAX = 1.5;

var QUANTITY = 25;

var canvas;

var context;

var particles;

var mouseX = SCREEN_WIDTH * 0.5;

var mouseY = SCREEN_HEIGHT * 0.5;

var mouseIsDown = false;

function init() {

canvas = document.getElementById( 'world' );

if (canvas && canvas.getContext) {

context = canvas.getContext('2d');

// Register event listeners

window.addEventListener('mousemove', documentMouseMoveHandl

你可能感兴趣的:(用html制作粒子线条)