canvas带方向指示的元素碰撞效果-html代码-BFW代码库

canvas带方向指示的元素碰撞效果

代码语言：html

所属分类：动画

代码描述：canvas带方向指示的元素碰撞效果，点击鼠标左键增加元素

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
  margin: 0;
  padding: 0;
}
</style>

</head>
<body>
<canvas id="canvas" width="640" height="480" />

<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
const log = document.getElementById('log');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}
class Vector2d {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  getRotateRad(cx, cy, x, y, radian) {
    const cos = Math.cos(radian);
    const sin = Math.sin(radian);
    const nx = cos * (x - cx) + sin * (y - cy);
    const ny = cos * (y - cy) - sin * (x - cx);
    return { x: nx, y: ny };
  }
  rotateRad(cx, cy, x, y, radian) {
    const cos = Math.cos(radian);
    const sin = Math.sin(radian);
    this.x = cos * (x - cx) + sin * (y - cy);
    this.y = cos * (y - cy) - sin * (x - cx);
  }
  add(x, y) {
    this.x += x;
    this.y += y;
  }
  sub(x, y) {
    this.x.........完整代码请登录后点击上方下载按钮下载查看