canvas网状布料触摸飘动重力模拟效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：canvas网状布料触摸飘动重力模拟效果代码，可模拟从绳子上掉下、修复等效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body,html {
        	padding:0;
        	margin:0;
        	background:#131417;
        	font-family:"Karla",sans-serif;
        	color:#FFF;
        	height:100%;
        	-webkit-user-select:none;
        	-moz-user-select:none;
        	-ms-user-select:none;
        	user-select:none
        }
        body.grab,html.grab {
        	cursor:-webkit-grab;
        	cursor:grab
        }
        body.grabbing,html.grabbing {
        	cursor:-webkit-grabbing;
        	cursor:grabbing
        }
        .stoneage-center {
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translateX(-50%) translateY(-50%);
        	text-align:center
        }
        h1 {
        	margin:0;
        	font-weight:300;
        	font-size:28px;
        	-webkit-user-select:none;
        	-moz-user-select:none;
        	-ms-user-select:none;
        	user-select:none
        }
        canvas {
        	background:#131417;
        	width:600px;
        	height:330px;
        	pointer-events:none
        }
        button {
        	background:0;
        	color:#FFF;
        	line-height:22px;
        	height:30px;
        	padding:0 20px;
        	margin:0 5px;
        	border-radius:5px;
        	border:2px solid #BF39A8;
        	cursor:pointer
        }
        button:nth-of-type(1) {
        	border:2px solid #E64D43
        }
        button:nth-of-type(2) {
        	border:2px solid #94264F
        }
        button:hover {
        	background:#BF39A8
        }
        button:hover:nth-of-type(1) {
        	background:#E64D43
        }
        button:hover:nth-of-type(2) {
        	background:#94264F
        }
    </style>
</head>

<body>

    <div class="stoneage-center">
        <h1>points and lines</h1><canvas></canvas>
        <div class="buttons"><button onclick="unPin()">toggle pin</button><button onclick="zeroGravity()">toggle gravity</button><button onclick="repair()">repair</button></div>
    </div>

    <script>
        // setup
        var canvas = document.querySelector('canvas')
        canvas.width = canvas.clientWidth
        canvas.height = canvas.clientHeight
        var mouse = {
           down: false,
           pos: undefined 
        }
        
        var ctx = canvas.getContext('2d')
        var draw = new Draw(ctx)
        
        // variables
        var global = {
           gravity: { x: 0, y: 0.25 },
           friction: 0.98,
           bounce: 1,
           width: canvas.width,
           height: canvas.height
        }
        
        var points = []
        var lines = []
        
        var spaceBetweenPoints = 10
        
        var numberOfHorizontalPoints = 50
        var numberOfVerticalPoints = 20
        
        // scene
        var scene = new Scene({
           start: function() {
              points = []
              // handy numbers for creating the points / lines
              var xOff = (canvas.width / 2) - (spaceBetweenPoints * numberOfHorizontalPoints / 2)
              var yOff = 40 // (canvas.height/2) - (spaceBetweenPoints * numberOfVerticalPoints / 2)
        
              for (var x = 0; x < numberOfHorizontalPoints; x++) {
                 for (var y = 0; y < numberOfVerticalPoints; y++) {
                    var xPos = x * spaceBetweenPoints + xOff
                    var yPos = y * spaceBetweenPoints + yOff
                    var point = new VerletPoint(xPos, yPos)
                    points.push(point)
        
                    // pin top points
                    if (y == 0) point.pin = true
                 }
              }
        
              setUpLines(0, 0)
           },
        
           iterate: function() {
              draw.clear()
        
              // running separate due to kind of messing up the naming
              for (var line of lines) line.move()
              for (var point of points) point.move()
        
              for (var line of lines) line.draw()
              for (var point of points) point.draw()
           },
        
           speed: 1000 / 60 // 60 per second
        })
        
        scene.start()
        
        function setUpLines(xHalf) {
           for (var x of [(numberOfHorizontalPoints/2 - 1) - xHalf, (numberOfHorizontalPoints/2) + xHalf]) {
              for (var y = 0; y < numberOfVerticalPoints; y++) {
                 var pointID = x * numberOfVerticalPoints + y
                 // continue
                 if (y > 0) {
                    var line = new VerletLine(points[pointID], points[pointID - 1])
                    line.color = `rgba(255, 50, ${Math.floor(x/numberOfHorizontalPoints*255)}, 0.75)`
                    lines.push(line)
                 }
        
                 if (x > 0) {
                    var line = new VerletLine(points[pointID], points[pointID - numberOfVerticalPoints])
                    line.color = `rgba(255, 50, ${Math.floor(x/numberOfHorizontalPoints*255)}, 0.75)`
                    lines.push(line)
                 }
              }
           }
        
           xHalf += 1
           if(xHalf < numberOfHorizontalPoints/2) {
              setTimeout(function() {
                 setUpLines(xHalf)
              }, 1000/30)
           }
        }
        
        function unPin() {
           for (var x = 0; x < numberOfHorizontalPoints; x++) {
              pointID = x * numberOfVerticalPoints
              points[pointID].pin = !points[pointID].pin
           }
        }
        
        function zeroGravity() {
           global.gravity = global.gravity.y
              ? { x: 0, y: 0 }
              : { x: 0, y: 0.25 }
        
           console.log(global.gravity);
        }
        
        function repair() {
           global.gravity = { x: 0, y: 0.25 }
        
           for (var x = 0; x < numberOfHorizontalPoints; x++) {
              pointID = x * numberOfVerticalPoints
              points[pointID].pos = points[pointID].start.clone()
              points[pointID].old = points[pointID].start.clone()
              points[pointID].pin = true
           }
        }
        
        // mouse
        document.body.addEventListener('mousemove', function(e) {
           onMouseMove(e)
        })
        
        document.body.addEventListener('mousedown', function(e) {
           var rectCanvas = canvas.getBoundingClientRect()
           mouse.down = new Vector(e.clientX - rectCanvas.left, e.clientY - rectCanvas.top)
           document.body.classList.toggle('grab', false)
           document.body.classList.toggle('grabbing', true)
        
           for (var point of points) {
              if (point.hover) point.held = true
           }
        })
        
        document.body.addEventListener('mouseup', function(e) {
           mouse.down = false
           onMouseMove(e)
        })
   .........完整代码请登录后点击上方下载按钮下载查看