HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0"> <meta name="format-detection" content="telephone=no"> <title>登录页面</title> <link type="text/css" href="../common/css/public.css" rel="stylesheet"/> <style type="text/css"> .jk{ width:100%; height: 250px; background: linear-gradient(to bottom, #fc761c 0%,#f16130 100%); position: relative; } </style> </head> <body> <div class="jk"> </div> </body> <script type="text/javascript" src="jquery-1.8.3.min.js" level="1" ></script> <script type="text/javascript" src="jiekuan.js"></script> <script type="text/javascript"> // 借款动态图调用 // 传参以对象形式 /*{ yeNum:剩余贷款额度, zeNum:总额度 }*/ $(".jk").jkShow({id:"jkShow"}); </script> </html>
jiekuan.js
/* 借款动态图插件 参数三个 { id:canvas指定id，必填 yeNum：可用额度，选填，默认39000.29 zeNum：授信额度，选填，默认50000.00 } */ ;(function($){ $.fn.extend({ "jkShow":function(options){ //检测用户传进来的参数是否合法 if (!isValid(options)) return this; //使用jQuery.extend 覆盖插件默认参数 var opts = $.extend({}, defaluts, options), _this = this; return (function($){ //创建动画 if(opts.id == undefined){ console.log("1"); return alert("请传入需要创建的canvas的ID"); }; var canvas = '<canvas id="'+opts.id+'"></canvas>'; _this.prepend(canvas); $("#"+opts.id).css({ "position":"absolute", "left":"50%", "top":"50%", "marginLeft":"-125px", "marginTop":"-125px" }); var canvas = document.getElementById(opts.id), ctx = canvas.getContext('2d'), cWidth = canvas.width = 250, cHeight = canvas.height = 250, score = opts.yeNum, allScore =opts.zeNum*0.00286, radius = 103, radius1 = 93, deg0 = Math.PI /9, deg1 = Math.PI /allScore,//最大额度*0.00298 dotSpeed = 0.06, textSpeed = Math.round(dotSpeed * 300 / deg1), angle = 0, credit = 0; //消除锯齿 if (window.devicePixelRatio) { canvas.style.width = cWidth+ "px"; canvas.style.height = cHeight + "px"; canvas.height = cHeight * window.devicePixelRatio; canvas.width = cWidth * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio); }; drawFrame(); function drawFrame() { // ctx.save(); ctx.clearRect(0, 0, cWidth, cHeight); ctx.translate(cWidth / 2, cHeight / 2); ctx.rotate(8 * deg0); //动态坐标 var aim = score * deg1 / 277; if(angle < aim) { angle += dotSpeed; }; if(credit< score){ credit = Number((credit+textSpeed).toFixed(2)); }else{ credit = score; }; text(credit); dot(ctx,radius * Math.cos(angle),radius * Math.sin(angle),deg0); motionCircle(ctx,radius,radius1,deg0, angle); totalCircle(ctx,radius,radius1,deg0,allScore); drawRoundedRect(); requestAnimFrame(drawFrame); }; function drawRoundedRect(){ //设置字体填充颜色 ctx.fillStyle = "rgba(255,255,255,0.6)"; //从坐标点(50,50)开始绘制文字 ctx.fillText("可用额度(元)", 90, 90); }; function motionCircle(ctx,radius,radius1,deg0, angle){ ctx.save();//运动白色外圆 ctx.beginPath(); ctx.lineWidth = 0.5; ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(255, 255, 255, .8)'; ctx.arc(0, 0, radius, -0.4*deg0, angle, false); ctx.stroke(); ctx.restore(); ctx.save();//运动白色内圆 ctx.beginPath(); ctx.lineWidth = 6.5; ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(255, 255, 255, .5)'; ctx.arc(0, 0, radius1, -0.4*deg0, angle, false); ctx.stroke(); ctx.restore(); }; function totalCircle(ctx,radius,radius1,deg0,totalNum){ //底部圆 ctx.save(); ctx.beginPath(); ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; /*ctx.shadowColor = 'rgba(235,65,9,.8)';//阴影圆 ctx.shadowOffsetX = 4; ctx.shadowOffsetY = 3;*/ ctx.lineWidth = 6.5; ctx.arc(0, 0, radius1, -0.4*deg0, 11.4* deg0, false); ctx.stroke(); ctx.restore(); //底部圆阴影 ctx.save(); ctx.beginPath(); ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(235,65,9,.3)'; /*ctx.shadowColor = 'rgba(235,65,9,.8)';//阴影圆 ctx.shadowOffsetX = 4; ctx.shadowOffsetY = 3;*/ ctx.lineWidth = 2; ctx.arc(0, 0, 89, -0.4*deg0, 11.4 * deg0, false); ctx.stroke(); ctx.restore(); //底部授信金融的背景 //圆角矩形 var w =145; //矩形的宽高 var h = 20; var x = 52.5; //开始的x轴坐标 var y = 165; //开始的y轴坐标 var r = 10; //圆角半径 var bdWidth = 0; //边框宽度 var bdColor = "#ef5620"; //边框的颜色 var bgcolor = "#ef5620"; //矩形背景的颜色 ctx.beginPath(); ctx.moveTo(x+r,y); ctx.lineWidth = bdWidth; ctx.strokeStyle = bdColor; ctx.fillStyle = bgcolor; ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = 'rgba(255, 255, 255, 0)'; ctx.globalCompositeOperation = 'source-atop'; ctx.lineWidth = 3; ctx.arc(0, 0, radius, -0.4*deg0, 0, false); ctx.stroke(); ctx.restore(); //可用额度文字 //设置字体样式 ctx.font = '12px'; //设置字体填充颜色 ctx.fillStyle = "rgba(255,255,255,1)"; //从坐标点(50,50)开始绘制文字 ctx.fillText("授信额度(元): "+totalNum.toFixed(2),62, 180); }; //圆点展示 function dot(ctx,x,y,deg0) { ctx.save(); ctx.beginPath(); var radialGrad = ctx.createRadialGradient(x, y, 0, x,y,22);//对角线渐变到（400，300）这个坐标 radialGrad.addColorStop(0.0, 'rgba(255,255,255,1)'); radialGrad.addColorStop(0.2, 'rgba(247,135,68,0.1)'); ctx.fillStyle = radialGrad; ctx.arc(x, y, 22, -1*deg0, Math.PI * 2, false); ctx.fill(); ctx.restore(); } //动态文字 function text(process) { ctx.save(); ctx.rotate(10 * deg0); ctx.fillStyle = '#fff'; ctx.font ='30px Arial'; ctx.shadowColor = "#e65416"; ctx.shadowOffsetY = 6; ctx.shadowOffsetX = 3; ctx.textAlign = 'center'; ctx.textBaseLine = 'top'; ctx.fillText(process.toFixed(2), 0, 5); ctx.restore(); } })(window.jQuery) } }) //默认参数 var defaluts = { yeNum:39000.09, zeNum:50000.00 }; //私有方法，检测参数是否合法 function isValid(options) { return !options || (options && typeof options === "object") ? true : false; } //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout window.requestAnimFrame =function (){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; }; })(window.jQuery)