Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
airplane
css
body { height: 100%; width: 100%; background: #1b1d21; } h1 { font-family: 'Open Sans', sans-serif; font-size: 92px; padding: 5px; text-align: center; text-rendering: optimizeLegibility; } .txtshadow{ color: #000; text-shadow: 0 0 1px #3D3D3D; } #canvas-container{ text-align: center; }
JavaScript
(function () { var unit= 50,canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw; /** * Init function.Initialize variables and begin the animation. */ function init() { canvas = document.getElementById("sineCanvas"); context = canvas.getContext("2d"); height = canvas.height; width = canvas.width; xAxis = Math.floor(height / 2); yAxis = Math.floor(width / 4); context.save(); draw(); } /** * Draw animation function. * * This function draws one frame of the animation, waits 25ms, and then calls * itself again. */ draw = function () { // Clear the canvas context.clearRect(0, 0, width, height); // BLUE gradient grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000); grd.addColorStop(0, 'rgba(189, 106, 155, 1.000)'); grd.addColorStop(1, 'rgba(189, 106, 155, 0.00)'); context.strokeStyle = grd; context.lineWidth = 2; // BLUE sine context.beginPath(); drawSine(draw.t, unit, 0, 1); context.stroke(); //BLUE plane drawPlane(draw.t, unit, 0, 1); //GREEN gradient grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000); grd.addColorStop(0, 'rgba(151, 204, 18, 1.000)'); grd.addColorStop(1, 'rgba(151, 204, 18, 0.000)'); context.strokeStyle = grd; // GREEN sine context.beginPath(); drawSine(draw.t, unit*2, 50, -1); context.stroke(); // GREEN plane drawPlane(draw.t, unit*2, 50, -1 ); //YELLOW Gradient grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000); grd.addColorStop(0, 'rgba(245, 223, 22, 1.000)'); grd.addColorStop(1, 'rgba(245, 223, 22, 0.0)'); context.strokeStyle = grd; //YELLOW sine context.beginPath(); drawSine(draw.t, unit*2, 100, 1); context.stroke(); //YELLOW plane drawPlane(draw.t, unit*2, 100, 1 ); //RED Gradient grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000); grd.addColorStop(0, 'rgba(204, 63, 24, 1.000)'); grd.addColorStop(1, 'rgba(204, 63, 24, 0.000)'); context.strokeStyle = grd; //RED sine context.beginPath(); drawSine(draw.t, unit*1/150, 150, -1); context.stroke(); //RED plane drawPlane(draw.t, unit*1/150, 150, -1 ); // Restore original styles context.restore(); // Update the time and draw again draw.seconds = draw.seconds - .007; draw.t = draw.seconds * Math.PI; setTimeout(draw , 35); }; draw.seconds = 0; draw.t = 0; /** * Function to draw sine * * The sine curve is drawn in 10px segments starting at the origin. */ function drawSine(t, unitval, offset, direction) { // Loop to draw segments for (i = yAxis; i <= width; i += 10) { x = t + (-yAxis + i) / unitval; y = Math.sin(x) * direction; context.lineTo(i + offset , (unitval / 3) * y + xAxis); } } /** * Function to draw arrow */ function drawPlane(t, unitVal, offset, direction) { // Cache position of arrow on the circle var y = xAxis + (unitVal / 3) * Math.sin(t) * direction; var img = new Image(); img.src = "http://i.imgur.com/LsYmdkL.png"; //img.src = "https://i.imgur.com/bYuAw4C.png"; // Draw yAxis bead context.beginPath(); context.drawImage(img, yAxis - 29 + offset , y - 16 ); //context.arc(yAxis, y, 5, 0, 2*Math.PI, false); context.stroke(); } init(); })();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>飞机背景动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号