canvas电弧闪电动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas电弧闪电动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; } body { background: linear-gradient(to bottom, #606c88 0%, #3f4c6b 100%); } canvas { border-radius: 200px; position: absolute; left: 50%; margin-left: -250px; top: 50%; margin-top: -150px; box-shadow: 0px 0px 12px black; border-top: 1px solid rgba(255, 255, 255, 0.5); } </style> </head> <body> <canvas id="canvas" width="500px" height="300px"> </canvas> <script> (function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cHeight = canvas.offsetHeight; var boltHeight = 130; function repeatOften() { drawLightning(); requestAnimationFrame(repeatOften); }; requestAnimationFrame(repeatOften); function drawLightning() { ctx.clearRect(0, 0, 500, 300); var grad = ctx.createLinearGradient(0, 0, 0, 300); grad.addColorStop(0, "black"); grad.addColorStop(0.4, "#00222f"); grad.addColorStop(0.5, "#008bc0"); grad.addColorStop(0.6, &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0