canvas实现熊熊大火燃烧动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现熊熊大火燃烧动画效果代码,点击任意区域可放火。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style type="text/css"> body { background-color: #000000; margin: 0px; } canvas { display: block; image-rendering: pixelated; } #info { position: absolute; top: 5px; width: 100%; color: #f06000; font-family: Monospace; font-size: 13px; text-align: center; } </style> </head> <body> <div id="container"></div> <div id="info">Click/Touch to create flames.</div> <script type="text/javascript"> var QUALITY = 6; var WIDTH = Math.floor(window.innerWidth / QUALITY); var HEIGHT = Math.floor(window.innerHeight / QUALITY); var SIZE = WIDTH * HEIGHT; var context, image, data, buffer1, buffer2, turbulence, isUserInteracting, pointers, count = 0; init(); function init() { var container, canvas; container = document.getElementById('container'); canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; canvas.style.width = window.innerWidth + "px"; canvas.style.height = window.innerHeight + "px"; container.appendChild(canvas); context = canvas.getContext("2d"); context.fillStyle = "rgb(0, 0, 0)"; context.fillRect (0, 0, WIDTH, HEIGHT); image = context.getImageData(0, 0, WIDTH, HEIGHT); data = image.data; buffer1 = []; buffer2 = []; turbulence = []; for (var i = 0; i < SIZE + WIDTH; i ++) { buffer1[i] = 0; buffer2[i] = 0; turbulence[i] = Math.random(); } document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); document.addEventListener('mouseout', onDocumentMouseOut, false); document.addEventListener('touchstart', onDocumentTouchStart, false); documen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0