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

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

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