js实现canvas模拟绳子重力交互效果代码
代码语言:html
所属分类:其他
代码描述:js实现canvas模拟绳子重力交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
body,html {
background:#213;
color:#342345;
height:100%;
overflow:hidden;
}
#paper {
border:#190C26 solid 20px;
background:#0D0514;
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width:800px;
height:600px;
}
</style>
</head>
<body>
<canvas id="paper" width="800" height="600"><script>"use strict";
var circle = {
x: 400,
y: 300,
radius: 75,
radius2: 75*75
};
var points;
// Creates a new rope to manipulate. This function is also called to reset after entering a bad state.
function createRope()
{
points = (function( x0, y0, x1, y1, steps )
{
var dx = (x1-x0)/steps;
var dy = (y1-y0)/steps;
var d = Math.sqrt( dx*dx + dy*dy );
var x = x0;
var y = y0;
var pts = [];
for( var i = 0 ; i < steps ; ++i, x+=dx, y+=dy )
pts.push({ x:x, y:y, lx:x, ly:y+10*Math.random(), distFromParent:d });
// The random variation in the value for "last y" gives the illusion of the rope snapping in to existence.
return pts;
})( 50, 50, 750, 50, 75 );
}
createRope();
function motion()
{
// Perform Verlet integration on each point, adding gravity along the y-axis.
for( var i = 0 ; i < points.length ; ++i ) {
var newX = points[i].x + (points[i].x - points[i].lx);
var newY = points[i].y + (points[i].y - points[i].ly) + 0.4;
points[i].lx = points[i].x;
points[i].ly = p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0