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