canvas模拟eharts首页动画效果
分类:实例代码
canvas模拟eharts首页动画效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用canvas模拟实现了eharts首页动画效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { background: -webkit-linear-gradient(#4f7e9a,#2a3d56); } #sin { display: block; } .wrap { width: 0; height: 200px; position: absolute; bottom: 40px; left: 0; overflow: hidden; animation: kk 2.4s linear forwards; } @keyframes kk { 0% { width: 0; height: 200px; } 100% { width: 100%; height: 200px; } } .shadow { width: 50%; position: absolute; top: 380px; left: -100%; animation: img 1s cubic-bezier(0.665, -0.570, 0.420, 1.650) forwards 1s; } @keyframes img { 0% { left: -100%; transform: translateX(0); } 100% { left: 50%; transform: translateX(-56%); } } #word { display: block; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); animation: hah 1s cubic-bezier(0.665, -0.570, 0.420, 1.650) forwards; } @keyframes hah { 0% { transform: translateX(-50%) scale(.3); } 100% { transform: translateX(-50%) scale(1); } } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <canvas id="word" width="1000" height="200"></canvas> <div class="wrap"> <canvas id="sin" height="200"></canvas> </div> <script> var screenWidth = document.documentElement.clientWidth; $("#sin").attr("width", screenWidth); var line = document.getElementById("sin"); var myCanvas = line.getContext("2d"); myCanvas.lineWidth = 2; myCanvas.strokeStyle = "#fff"; myCanvas.beginPath(); myCanvas.translate(20, 100); myCanvas.moveTo(-100, 50); for (var i = 0; i < 80; i += 0.1) { var x = i * 80 - 40; var y = Math.cos(i) * 50; myCanvas.lineTo(x, y); } myCanvas.stroke(); myCanvas.closePath(); myCanvas.lineWidth = 1; myCanvas.strokeStyle = "rgba(255,255,255,.8)"; myCanvas.beginPath(); myCanvas.translate(15, -30); myCanvas.moveTo(-100, 40); for (var i = -2; i < 80; i += 0.1) { var x = i * 60 - 40; var y = Math.cos(i) * 40; myCanvas.lineTo(x, y); } myCanvas.stroke(); myCanvas.closePath(); myCanvas.strokeStyle = "rgba(255,255,255,.5)"; myCanvas.beginPath(); myCanvas.translate(5, -46); myCanvas.moveTo(-90, 40); for (var i = 0; i < 80; i += 0.1) { var x = i * 46 - 90; var y = Math.cos(i) * 16; myCanvas.lineTo(x, y); } myCanvas.stroke(); myCanvas.closePath(); /* eCharts */ var line2 = document.getElementById("word"); var myCanvas2 = line2.getContext("2d"); var timer = null; var angle = 0; var flag = 0; var $deg = 0; draw(0); timer = setInterval(function() { flag++; if (flag >= 120) { angle--; // console.log(angle); if (angle <= -40) { clearInterval(timer); } $deg = angle * Math.PI / 180; draw($deg); } }, 20); myCanvas2.save(); myCanvas2.font = "150px Arial"; myCanvas2.beginPath(); myCanvas2.translate(210, 120); myCanvas2.strokeStyle = "white"; myCanvas2.fillStyle = "white"; myCanvas2.fillText("charts 3", 30, 30); myCanvas2.stroke(); myCanvas2.fill(); myCanvas2.closePath(); myCanvas2.restore(); function draw(deg) { myCanvas2.save(); myCanvas2.beginPath(); myCanvas2.translate(190, 150); myCanvas2.clearRect(-80, -100, 132, 120); myCanvas2.rotate(deg); //myCanvas2.strokeStyle = "rgba(170,49,77,.95)"; myCanvas2.fillStyle = "rgba(170,49,77,.95)"; myCanvas2.font = "160px Arial"; myCanvas2.fillText("e", -30, 10); //myCanvas2.stroke(); myCanvas2.fill(); myCanvas2.rotate(-deg); myCanvas.closePath(); myCanvas2.restore(); } </script> </body> </html>
canvas模拟eharts首页动画效果,这样的场景在实际项目中还是用的比较多的,关于canvas模拟eharts首页动画效果就介绍到这了。