<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas 瑜伽表演/牵线木偶/皮影戏</title>
<style>
html {
overflow: hidden;
touch-action: none;
content-zooming: none;
}
body {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
background: #c9c4b5;
}
.draggable {
cursor: pointer;
cursor: -webkit-grab;
}
.dragging {
cursor: move;
cursor: -webkit-grabbing;
}
</style>
</head>
<body>
<script>
! function() {
"use strict";
var DEBUG = false;
Math.sign = Math.sign || function(x) {
return x > 0 ? 1 : -1;
}
// main loop
function run() {
requestAnimationFrame(run);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// dragging
if (pointer.drag) {
pointer.drag.x += (pointer.x - pointer.drag.x) / 20;
pointer.drag.y += (pointer.y - pointer.drag.y) / 20;
}
// static points
scene.static();
// draw scene
if (frame++ > 15) {
ctx.save();
var s = skins;
while (s) s = s.draw();
ctx.restore();
}
// verlet integration
draggable = false;
var p = points;
while (p) p = p.integrate();
canvas.elem.className = pointer.drag ? "dragging" : (draggable ? "draggable" : "default");
// solve constraints
var c = constraints;
while (c) c = c.solve();
// show constraints and points
if (DEBUG) {
var c = constraints;
while (c) c = c.draw();
}
}
// point 2D constructor
function Point(x, y, radius, mass, gravity) {
this.x = canvas.width * 0.5 + x;
this.y = y;
this.oldX = this.x;
this.oldY = y;
this.radius = radius || 1;
this.mass = mass || 1.0;
this.friction = kFriction;
this.gravity = gravity || kGravity;
this.next = null;
!points && (points = this);
last && (last.next = this);
last = this;
}
// set position
Point.prototype.position = function(x, y) {
this.x = x;
this.y = y;
}
// verlet integration
Point.prototype.integrate = function() {
var x = this.x;
var y = this.y;
this.x += (this.x - this.oldX) * this.friction;
this.y += (this.y - this.oldY) * this.friction + this.gravity;
this.oldX = x;
this.oldY = y;
// bottom + friction
if (this.y > canvas.height - this.radius) {
var d = Math.min(20, this.y - canvas.height + this.radius);
this.x -= d * (this.x - this.oldX) / 5;
this.y = canvas.height - this.radius;
}
// cursor style
var dx = this.x - pointer.x;
var dy = this.y - pointer.y;
var d = Math.sqrt(dx * dx + dy * dy);
if (d < this.radius * 2) draggable = true;
return this.next;
}
// calculate distance between 2 points
Point.prototype.dist = function(p) {
var dx = this.x - p.x;
var dy = this.y - p.y;
return Math.sqrt(dx * dx + dy * dy);
}
// Angled Constraint constructor
function AngleConstraint(p1, p2, p3, angle, range, force) {
this.p1 = p1;
this.p2 = p2;
this.p3 = p3;
this.len1 = p1.dist(p2);
this.len2 = p2.dist(p3);
this.angle = angle;
this.range = range;
this.force = force || 0.2;
!constraints && (constraints = this);
last && (last.next = this);
last = this;
}
// solve 2 vectors angled (+ stick) constraint
// http://stackoverflow.com/questions/16336702/ragdoll-joint-angle-constraints
AngleConstraint.prototype.solve = function() {
var a, b, c, e, m, m1, m2, m3, x1, y1, cos, sin;
a = Math.atan2(this.p2.y - this.p1.y, this.p2.x - this.p1.x);
b = Math.atan2(this.p3.y - this.p2.y, this.p3.x - this.p2.x);
c = this.angle - (b - a);
c = c > Math.PI ? (c - 2 * Math.PI) : (c < -Math.PI ? (c + 2 * Math.PI) : c);
e = (Math.abs(c) > this.range) ? (-Math.sign(c) * this.range + c) * this.force : 0;
m = this.p1.mass + this.p2.mass;
m1 = this.p1.mass / m;
m2 = this.p2.mass / m;
cos = Math.cos(a - e);
sin = Math.sin(a - e);
x1 = this.p1.x + (this.p2.x - this.p1.x) * m2;
y1 = this.p1.y + (this.p2.y - this.p1.y) * m2;
this.p1.x = x1 - cos * this.len1 * m2;
this.p1.y = y1 - sin * this.len1 * m2;
this.p2.x = x1 + cos * this.len1 * m1;
this.p2.y = y1 + sin * this.len1 * m1;
a = Math.atan2(this.p2.y - this.p3.y, this.p2.x - this.p3.x) + e;
m = this.p2.mass + this.p3.mass;
m2 = this.p2.mass / m;
m3 = this.p3.mass / m;
cos = Math.cos(a);
sin = Math.sin(a);
x1 = this.p3.x + (this.p2.x - this.p3.x) * m2;
y1 = this.p3.y + (this.p2.y - this.p3.y) * m2;
this.p3.x = x1 - cos * this.len2 * m2;
this.p3.y = y1 - sin * this.len2 * m2;
this.p2.x = x1 + cos * this.len2 * m3;
this.p2.y = y1 + sin * this.len2 * m3;
return this.next;
}
// draw angle constraint (DEBUG mode)
AngleConstraint.prototype.draw = function() {
ctx.beginPath();
ctx.moveTo(this.p1.x, this.p1.y);
ctx.lineTo(this.p2.x, this.p2.y);
ctx.lineTo(this.p3.x, this.p3.y);
ctx.stroke();
ctx.beginPath();
ctx.arc(this.p1.x, this.p1.y, this.p1.radius * 2, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(this.p2.x, this.p2.y, this.p2.radius * 2, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(this.p3.x, this.p3.y, this.p3.radius * 2, 0, Math.PI * 2);
ctx.stroke();
return this.next;
}
// simple stick constraint constructor
function Constraint(p1, p2, force, len) {
this.p1 = p1;
this.p2 = p2;
this.len = len || p1.dist(p2);
this.force = force || 2;
!constraints && (constraints = this);
last && (last.next = this);
last = this;
}
// solve stick constraint
Constraint.prototype.solve = function() {
var d, dx, dy, s1, s2, tm;
dx = this.p1.x - this.p2.x;
dy = this.p1.y - this.p2.y;
d = Math.sqrt(dx * dx + dy * dy);
tm = this.p1.mass + this.p2.mass;
d = (d - (d + (this.len - d) * this.force)) / d * 0.5;
s1 = d * (this.p1.mass / tm);
s2 = d * (this.p2.mass / tm);
this.p1.x = this.p1.x - dx * s2;
this.p1.y = this.p1.y - dy * s2;
this.p2.x = this.p2.x + dx * s1;
this.p2.y = this.p2.y + dy * s1;
return this.next;
}
// draw constraint (DEBUG mode)
Constraint.prototype.draw = function() {
ctx.beginPath();
ctx.moveTo(this.p1.x, this.p1.y);
ctx.lineTo(this.p2.x, this.p2.y);
ctx.stroke();
ctx.beginPath();
ctx.arc(this.p1.x, this.p1.y, this.p1.radius * 2, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(this.p2.x, this.p2.y, this.p2.radius * 2, 0, Math.PI * 2);
ctx.stroke();
return this.next;
}
// skin constructor
function Skin(img
HTML5 Canvas实现的瑜伽表演牵线木偶皮影戏动画效果源码.zip （15个子文件） 
132686868297211370 images 
gd14.png 37KB gd2.png 15KB gd18.png 32KB gd1.png 99KB gd11.png 11KB gd12.png 22KB gd20.png 25KB gd16.png 106KB gd3.png 12KB gd5.png 22KB gd15.png 38KB gd6.png 32KB gd19.png 25KB gd13.png 23KB
index.html 17KB资源评论
毕业_设计
- 粉丝: 1992
- 资源: 1万+
最新资源
- 基于大数据的压缩包密码破解软件详细文档+全部资料+源码.zip
- 基于大数据、人工智能的招聘大数据分析展示系统——前端可视化详细文档+全部资料+源码.zip
- 基于大数据的图书推荐系统详细文档+全部资料+源码.zip
- 基于电子商城项目，包含：数据库操作（mysql）、Swing界面等详细文档+全部资料+源码.zip
- 基于大数据挖掘的饮食推荐小程序详细文档+全部资料+源码.zip
- 基于豆瓣影视数据(不完整)的影视大数据分析平台。爬虫（影视数据和用户数据），推荐系统（基于用户的协同过滤算法），后台（flask实现的简易后台）。详细文档+全部资料+源码.zip
- 基于多种编程语言开源免费不限制提供生活常用,出行服务,开发工具,金融服务,通讯服务和公益大数据的平台详细文档+全部资料+源码.zip
- 基于开源Litemall电商项目的大数据项目数据仓库(五层)、实时计算和用户画像。大数据平台采用CDH6.3.2(已使用vagrant+ansible脚本化)，
- 基于注解和反射Excel的简单、大数据量、基于模板、多sheet页的导入导出详细文档+全部资料+源码.zip
- 基于垃圾短信基于文本内容的识别详细文档+全部资料+源码.zip
- 计算机网络资源文件1111
- 基于云平台的大数据路网流量管控详细文档+全部资料+源码.zip
- Delphi 12 控件之DevExpressVCLProducts-24.2.3.exe.zip
- 政府绿色采购明细数据（2015-2024.3）.zip
- 天工CAD软件的测试反馈表
- Springboot3声明式客户端
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
