js实现canvas模拟绳子重力交互效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看