前言：
现在你们对“jquery圆盘抽奖代码”都比较讲究，看官们都需要分析一些“jquery圆盘抽奖代码”的相关内容。那么小编同时在网摘上搜集了一些关于“jquery圆盘抽奖代码””的相关内容，希望大家能喜欢，小伙伴们一起来学习一下吧！1.说明：
1.1 推荐指数：★★★★
1.2 环境：谷歌浏览器、微软vscode编辑器
1.3 熟悉sin和cos的函数与圆（画圆弧的关系）深入理解
比较真实的雷达界面扫描图
2.本次的模拟效果图：
3.css和js文件的引入：
3.1 同一个文件夹或者目录下引入：./xxx.js或者./xxx.css
3.2 大型的html文件或者一般在html文件的同一个目录下，建css文件夹和js文件夹，放入相应文件夹下，那么导入就是：css/xxx.css和js/xxxx.js
3.3 外部引入法：找到网址：比如：网址在代码注释里query-3.4.1.min.js，引入即可。
但是如果没有网络，那么html文件就不可用了，怎么办呢？有办法。
用浏览器打开，复制：网址在代码注释里jquery-3.4.1.min.js，打开。
全选复制（ctrl+a），在本地文件夹新建一个js文件：jquery-3.4.1.min.js，将复制的内容，黏贴进入，保存即可。向上面的js文件和css文件一样，作为本地js文件引入。
4.本次html文件代码：index.html
<!doctype html><html><head><meta charset="utf-8"><title>Canvas带坐标雷达扫描特效</title><!--在线引入地址：;<!--script-- src="./jquery.min.js"></!--script--><script src=";></script><!--将style作为单独css文件，引入，否认就是style和/style的标签内--><!--采用下面格式：link法--><link type="text/css" href="./style.css" rel="stylesheet" /></head><body><canvas id="myCanvas"></canvas><div class="info"> <!--显示文字段落--> <h1>Warning！！Enemy is coming！！</h1> <!--初始化cs-xo，之后就是message弹出动态数据--> <p class="message">cs-xo</p></div><!--将radar.js作为单独js文件，引入，否认就是script和/script的标签内--><script src="./radar.js"></script></body></html>
注意：外部引入和本地引入基本没什么区别，如果css和js=JavaScript写在html内，可能有不同，上面注释里有提到。
5.jquery-3.4.1.min.js代码不写了，可以自己去下载，免费的，或者上面的有讲解如何操作，此处略。
6.新建一个radar.js文件，代码如下：
var c = $("#myCanvas")[0];var ctx = c.getContext("2d");/*雷达界面颜色=草地绿色*/var color_gold="124,252,0"var ww,wh;var center={x: 0,y: 0};// 定义函数function getWindowSize(){ ww=$(window).outerWidth(); wh=$(window).outerHeight(); c.width=ww; c.height=wh; // 中心坐标是窗口的一半 center={x: ww/2,y: wh/2}; ctx.restore(); ctx.translate(center.x,center.y);}// 启动函数getWindowSize();$(window).resize(getWindowSize);// 10=敌机数量，随机出现var enemies=Array(10).fill({}).map( function(obj){ return { r: Math.random()*200, deg: Math.random()*360, opacity: 0 } });setInterval(draw,10);var time=0;var deg_to_pi=Math.PI/180;// 画圆的函数，三角函数sin和cos画圆法function Point(r,deg){ return { x: r*Math.cos(deg_to_pi*deg), y: r*Math.sin(deg_to_pi*deg), };}/*定义颜色函数*/function Color(op){ return "rgba("+color_gold+","+op+")";}function draw(){ time+=1; /*画长方形的背景颜色填充 "#111"=黑色;*/ ctx.fillStyle = "#111"; ctx.beginPath(); /*画长方形*/ ctx.rect(-2000,-2000,4000,4000); ctx.fill(); /*十字垂直水平坐标线，0.1~1代表粗细*/ ctx.strokeStyle="rgba(255,125,64,0.5)"; // ctx.strokeStyle="255,125,64";// 默认粗细值为1 ctx.moveTo(-ww/2,0); ctx.lineTo(ww/2,0); ctx.moveTo(0,-wh/2); ctx.lineTo(0,wh/2); ctx.stroke(); // 雷达扫面绿色和半径大小 ctx.strokeStyle=Color(1); var r=300; var deg=time; var newpoint=Point(r,deg); var line_deg = (time/2) % 360; // 雷达动态转动的扫描扇形的弧度为100，最大360 var line_deg_len=100; for(var i=0;i<line_deg_len;i++){ var deg1 = (line_deg-i-1) ; var deg2 = (line_deg-i) ; var point1=Point(r,deg1); var point2=Point(r,deg2); // 代表随着雷达扫描扇形的移动，颜色逐渐变淡 var opacity=1-(i/line_deg_len)-0.3; if (i==0) opacity=1; ctx.beginPath(); // 雷达扇形绿色动态渐变淡色 ctx.fillStyle=Color(opacity); ctx.moveTo(0,0); ctx.lineTo(point1.x,point1.y); ctx.lineTo(point2.x,point2.y); ctx.fill(); } enemies.forEach(function(obj){ // 敌机出现的原点 ctx.fillStyle=Color(obj.opacity); var obj_point=Point(obj.r,obj.deg); ctx.beginPath(); ctx.arc( obj_point.x,obj_point.y, // 绿色敌机出现的小圆点4是半径 4,0,2*Math.PI ); ctx.fill(); ctx.strokeStyle= Color(obj.opacity); /*如果这样直接设置，ctx.strokeStyle= '#FF4500，那么敌机就是一直出现在屏幕';*/ var x_size=6; /* 雷达显示敌机目标大小设置*/ ctx.lineWidth=4; ctx.beginPath(); ctx.moveTo(obj_point.x-x_size,obj_point.y+x_size); ctx.lineTo(obj_point.x+x_size,obj_point.y-x_size); ctx.moveTo(obj_point.x+x_size,obj_point.y+x_size); ctx.lineTo(obj_point.x-x_size,obj_point.y-x_size); ctx.stroke(); if (Math.abs(obj.deg - line_deg)<=1){ obj.opacity=1; // 显示左上角侦查到的地理坐标 $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3)); } obj.opacity*=0.99; // 显示敌机出现的涟漪圈的颜色 ctx.strokeStyle= Color(obj.opacity); /*目标敌机显示后的圆圈涟漪粗细设置*/ ctx.lineWidth=1; ctx.beginPath(); ctx.arc( obj_point.x,obj_point.y, 10*(1/(obj.opacity+0.0001)),0,2*Math.PI ); ctx.stroke(); }); // 雷达虚点固定圆盘的颜色，半径等设置 ctx.strokeStyle='yellow'; var split =120; var feature =15; // 15个小格 var start_r=230; // 半径 var len = 5; for(var i=0;i<split;i++){ ctx.beginPath(); var deg = (i/120) * 360; if (i%feature==0){ len=10; ctx.lineWidth=5; }else{ len=5; ctx.lineWidth=1; } var point1 =Point(start_r,deg); var point2 =Point(start_r+len,deg); ctx.moveTo(point1.x,point1.y); ctx.lineTo(point2.x,point2.y); ctx.stroke(); } /*画圈函数定义,下面三个画圆函数的定义*/ function CondCircle(r,lineWidth,func_cond){ ctx.lineWidth=lineWidth; /* 颜色定义*/ /*注意颜色定义：有引号的和没有引号的区别，就是前面有没有颜色图标*/ ctx.strokeStyle='#00C78C'; ctx.beginPath(); for(var i=0;i<=360;i++){ var point =Point(r,i); if (func_cond(i)){ ctx.lineTo(point.x,point.y); }else{ ctx.moveTo(point.x,point.y); } } ctx.stroke(); } // 雷达外围的移动半弧形，300为半径，2代表粗细 CondCircle(300,2,function(deg){ return ((deg+time/10)%180)<90; }); // 雷达中间绿色的移动半弧形，160为半径，2代表粗细 CondCircle(160,2,function(deg){ return ((deg+time/5)%180)<90; }); // 雷达内的小圆圈，绿色虚线圈，1代表粗细 CondCircle(100,1,function(deg){ // 如果这里没有，那么颜色就是三条线函数里统一的颜色，也可以单独设立 ctx.strokeStyle='pink'; return (deg%3)<1; }); }7.新建一个style.css文件，代码如下：
html, body { width: 100%; height: 100%; padding: 0; margin: 0; /*隐藏浏览器的条形伸缩*/ overflow: hidden;}/*定义画布*/canvas { -webkit-transform: scaleY(-1); transform: scaleY(-1);}/*显示警告信息位置设置*/.info { position: absolute; left: 10px; top: 10px;}h1 { /*显示警告信息文字颜色设置*/ color:red; letter-spacing: 0.5px; margin: 0; font-size:smaller;}.message { /*显示雷达预警敌机的动态位置的文字颜色设置*/ margin: 0; color:#00FFFF; font-size: x-large;}8.通过简单的例子，熟悉html、css和js的关系和布局等基本知识，熟练掌握基本操作。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery圆盘抽奖代码
