canvas光影喷射回弹动画效果
代码语言:html
所属分类:动画
代码描述:canvas光影喷射回弹动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <style type="text/css"> canvas { position: absolute; height: 100%; width: 100%; left: 0; top: 0; cursor: crosshair; background-color: Blue; } </style> </head> <body> <canvas></canvas> <script type="text/javascript"> bgColor = '#000'; gravity = 0.5; particleColor = '#279'; canvas = document.querySelector('canvas'); ctx = canvas.getContext('2d'); (onresize = function() { width = canvas.width = canvas.clientWidth; height = canvas.height = canvas.clientHeight; o = { x: Math.floor(width/2), y: Math.floor(height/2)}; edge = { top: -o.y, right: width-o.x, bottom: height-o.y, left: -o.x }})(); particles = {}; newParticle = (function() { var nextIndex = 0; return function(x, y, r, o, c, xv, yv, rv, ov) { particles[++nextIndex] = { index: nextIndex, x: x, y: y, r: r, o: o, c:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0