canvas雷达扫描动画效果代码-html代码-BFW代码库

canvas雷达扫描动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas雷达扫描动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Abel'>
<style>
    html,body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	overflow:hidden;
	font-family:Abel;
}
canvas {
	background-color:#333;
	-webkit-transform:scaleY(-1);
	transform:scaleY(-1);
}
.info {
	position:absolute;
	left:50px;
	bottom:50px;
}
h1 {
	color:white;
	letter-spacing:3px;
	margin:0;
}
.message {
	margin:0;
	color:#b99362;
}

</style>
</head>

<body>
    <canvas id="myCanvas"></canvas>
    <div class="info">
        <h1>Boss, CODING Please.</h1>
        <p class="message">temp</p>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script >
        var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");
var color_gold = "185,147,98";
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);
var enemies = Array(10).fill({}).map(function(b) {
    return {
        r: Math.random() * 200,
        deg: Math.random() * 360,
        opacity: 0
    }
});
setInterval(draw, 10);
var time = 0;
var deg_to_pi = Math.PI / 180;

function Point(e, d) {
    return {
        x: e * Math.cos(deg_to_pi * d),
        y: e * Math.sin(deg_to_pi * d),
    }
}

function Color(b) {
    return "rgba(" + color_gold + "," + b + ")"
}

function draw() {
    time += 1;
    ctx.fillStyle = "#111";
    ctx.beginPath();
    ctx.rect(-2000, -2000, 4000, 4000);
    ctx.fill();
    ctx.strokeStyle = "rgba(255,255,255,0.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 z = 200;
    var D = time;
    var v = Point(z, D);
    var t = (time / 2) % 360;
    var u = 100;
    for (var i = 0; i .........完整代码请登录后点击上方下载按钮下载查看