H5画布canvas特效（旋转跳跃不停歇）

最新推荐文章于 2024-05-17 15:26:01 发布

tino.tang

最新推荐文章于 2024-05-17 15:26:01 发布

阅读量3.6k

点赞数

分类专栏：实用资源文章标签： js css 前端技术

本文链接：https://blog.csdn.net/qq_36289377/article/details/78912903

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.panel{
margin:20% auto auto 35%;
}
.input{
width:500px;
height:30px;
}
.btn{
width:515px;
height:40px;
}
.input_form{
float:left;
margin:-35% 0 0 25%;
position:absolute;
}
</style>
<title>Login</title>
</head>
<body>
<canvas id="canvas"  width="1902" height="950"></canvas>
<script>


function project3D(x, y, z, vars) {
var p, d;
x -= vars.camX;
y -= vars.camY - 8;
z -= vars.camZ;
p = Math.atan2(x, z);
d = Math.sqrt(x * x + z * z);
x = Math.sin(p - vars.yaw) * d;
z = Math.cos(p - vars.yaw) * d;
p = Math.atan2(y, z);
d = Math.sqrt(y * y + z * z);
y = Math.sin(p - vars.pitch) * d;
z = Math.cos(p - vars.pitch) * d;
var rx1 = -1000;
var ry1 = 1;
var rx2 = 1000;
var ry2 = 1;
var rx3 = 0;
var ry3 = 0;
var rx4 = x;
var ry4 = z;
var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
if (!z)
z = 0.000000001;
if (ua > 0 && ua<1&&ub>0 &&

最低0.47元/天解锁文章

tino.tang

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
H5画布canvas特效（旋转跳跃不停歇）

.panel{margin:20% auto auto 35%;}.input{width:500px;height:30px;}.btn{width:515px;height:40px;}.input_form{float:left;margin:-35% 0 0 25%;position:absolute;}Loginfunction proje
复制链接

扫一扫