canvas实现彩色光影雷达扫描动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现彩色光影雷达扫描动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } </style> <style> body { background: #000; color: #aaa; font: 100%/20px helvetica, arial, sans-serif; } canvas { display: block; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; } #control-panel { background: rgba(0,0,0,.75); border: 1px solid #333; left: 20px; padding: 10px 15px; position: absolute; top: 20px; z-index: 2; } p { font-size: 12px; margin: 0 0 5px; } label { font-size: 12px; font-weight: bold; } button { display: block; margin: 10px 0 5px; } a { border-bottom: 1px dotted #444; color: #fff; font-size: 12px; text-decoration: none; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script> </head> <body> <div id="control-panel"> <p>单击并拖动,绘图</p> <label>痕迹: </label> <input type="checkbox" id="trail" name="trail" checked=checked /> <button id="clear">清除</button> </div> <canvas id="c"></canvas> <script> window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}(); document.onselectstart = function() { return false; }; var c = docume.........完整代码请登录后点击上方下载按钮下载查看
网友评论0