canvas指纹识别进度动画效果代码
代码语言:html
所属分类:进度条
代码描述:canvas指纹识别进度动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
background: #131418;
}
canvas {
background: #001b30;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<canvas id="canvas"> </canvas>
</div>
<!-- partial -->
<script>
const { sin, PI } = Math;
const fullCircle = 2 * PI;
const canvas = document.getElementById("canvas");
const range = x => Array(x).fill(0).map((_, index) => index)
const norm = (val, min, max)=>(val - min) / (max - min)
const lerp = (nrm, min, max)=>(max - min) * nrm + min
const lerpMap = (val, sMin, sMax, dMin, dMax)=>lerp(norm(val, sMin, sMax), dMin, dMax)
const w = 400;
const h = 250;
canvas.width = 2 * w;
canvas.height = 2 * h;
const ctx = canvas.getContext("2d");
ctx.translate(w, h);
const rect = ({ color, x, y, w, h }) => {
ctx.beginPath();
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
};
function clear() {
rect({
color: "#001b30",
x: -w,
y: -h,
w: 2 * w,
h: 2 * h
});
}
const line = ({ x1, y1, x2, y2 }) => {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineWidth = 4;
ctx.strokeStyle = "#00ffff";
ctx.stroke();
c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0