js canvas模拟物理物体摇摆动画效果代码-html代码-BFW代码库

js canvas模拟物理物体摇摆动画效果代码

代码语言：html

所属分类：动画

代码描述：js canvas模拟物理物体摇摆动画效果代码，拖动物体关节处看效果

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
	 margin: 0;
  overflow:hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

body {
  background:#333;
}

canvas {
  background:#333;
  width:1000px;
  height:340px;
  margin:0 auto;
  display:block;
  border:1px dashed #555;
  border-top:none;
}

#info {
  position:absolute;
  left:-1px;
  top:-1px;
  width:auto;
  max-width:380px;
  height:auto;
  background:#f2f2f2;
  border-bottom-right-radius:10px;
}

#top {
  background:#fff;
  width:100%;
  height:auto;
  position:relative;
  border-bottom:1px solid #eee;
}

p {
  font-family:Arial, sans-serif;
  color:#666;
  text-align:justify;
  font-size: 16px;
  line-height:22px;
  margin:10px;
}

a {
  font-family:sans-serif;
  color:#444;
  text-decoration:none;
  font-size: 20px;
}

#site {
  float:left;
  margin: 10px;
  color: #38a;
  border-bottom: 1px dashed #bbf;
  padding-bottom:3px
}

#close {
  float:right;
  margin: 10px;
}
</style>




</head>

<body  >
  <canvas id = "c"></canvas>

<div id="info">
  <div id="top">
  <a id="close" href="">close</a>
  </div>
  <p>
    - Left click to drag points (corners, joints etc).<br>
    - Right click to delete a point.<br>
    - Hold ctrl to enter edit mode, release to exit.<br><br>
      &nbsp;&nbsp;<strong>When in edit mode:</strong>.........完整代码请登录后点击上方下载按钮下载查看