js实现canvas零件人跳舞动画交互效果代码
代码语言:html
所属分类:动画
代码描述:js实现canvas零件人跳舞动画交互效果代码,拖动一个往上抛试试
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>
<meta charset="UTF-8">
<style>
body, html {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
background:#000;
cursor: pointer;
}
</style>
</head>
<body>
<canvas width="971" height="744"></canvas><!--
o
\_/\o
( Oo) \|/
(_=-) .===O- ~~Z~A~P~~ -O-
/ \_/U' /|\
|| |_/
\\ |
{K ||
| PP
| ||
(__\\
-->
<script >
"use strict";
///////////////// worker thread code ///////////////////
const theLastExperience = noWorkers => {
"use strict";
// ---- robot structure ----
const struct = {
points: [
{
x: 0,
y: -4,
f(s, d) {
this.y -= 0.01 * s * ts;
} },
{
x: 0,
y: -16,
f(s, d) {
this.y -= 0.02 * s * d * ts;
} },
{
x: 0,
y: 12,
f(s, d) {
this.y += 0.02 * s * d * ts;
} },
{ x: -12, y: 0 },
{ x: 12, y: 0 },
{
x: -3,
y: 34,
f(s, d) {
if (d > 0) {
this.x += 0.01 * s * ts;
this.y -= 0.015 * s * ts;
} else {
this.y += 0.02 * s * ts;
}
} },
{
x: 3,
y: 34,
f(s, d) {
if (d > 0) {
this.y += 0.02 * s * ts;
} else {
this.x -= 0.01 * s * ts;
this.y -= 0.015 * s * ts;
}
} },
{
x: -28,
y: 0,
f(s, d) {
this.x += this.vx * 0.025 * ts;
this.y -= 0.001 * s * ts;
} },
{
x: 28,
y: 0,
f(s, d) {
this.x += this.vx * 0.025 * ts;
this.y -= 0.001 * s * ts;
} },
{
x: -3,
y: 64,
f(s, d) {
this.y += 0.015 * s * ts;
if (d > 0) {
this.y -= 0.01 * s * ts;
} else {
this.y += 0.05 * s * ts;
}
} },
{
x: 3,
y: 64,
f(s, d) {
this.y += 0.015 * s * ts;
if (d > 0) {
this.y += 0.05 * s * ts;
} else {
this.y -= 0.01 * s * .........完整代码请登录后点击上方下载按钮下载查看
















网友评论0