canvas鼠标跟随摄像头效果-html代码-BFW代码库

canvas鼠标跟随摄像头效果

代码语言：html

所属分类：动画

代码描述：canvas鼠标跟随摄像头效果

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


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

<style>
*{
  margin: 0;
	padding: 0
}
body{
  background: #fafafa;
  font-family:Courier;
}
canvas {
	display: block;
	position: fixed;
	left: 0;
	top: 25px;
}
.info{
  font-size:50px;
  text-align:center;
  margin-top: 50px;
  width:40%;
  margin: 50px auto 0 auto;
  transition: opacity 2s;
}
.download-link{
  font-size:16px;
  position:absolute;
  bottom:1em;
  left:1em;
}
.download-link a{
  color:#fa4e3e;
}
</style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>



<script >
window.requestAnimFrame = function () {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
}();

var BigBrother = function () {

  "use strict";

  var CCTVCam = {
    viewPoint: {},
    angle: 0,
    newAngle: 0,
    translation: {},
    maxAngle: 0,
    minAngle: 0,

    init: function () {
      this.viewPoint = {
        x: 0,
        y: 0 };

      this.angle = 0;
      this.newAngle = 0;
      this.translation = {
        x: 62.5,
        y: 92 };

      this.maxAngle = 2.85;
      this.minAngle = -0.55;
    },

    draw: function () {
      // smooth movement of the cam. Thanks Andy!
      this.angle += (this.newAngle - this.angle) / 15;
      ctx.beginPath();
      // draw horizontal stab
      ctx.rect(0, 70, 10, 45);
      this.roundRect(9, 83.75, 10, 17.5, 2);
      ctx.rect(18.5, 90, 37, 5);
      // draw joint
      ctx.arc(this.translation.x, this.translation.y, 7.5, 0, 2 * Math.PI);
      ctx.save();
      // translate to center of the joint
      ctx.translate(this.translation.x, this.translation.y);
      ctx.rotate(this.angle);
      // draw vertical stab
      ctx.rect(-2.5, -32.5, 5, 32.5);
      this.roundRect(-8.5, -37.5, 17.5, 6, 2);
      // draw cam
      ctx.rect(-32, -64, 80, 27.5);
      ctx.rect(48, -60, 5, 15);
      ctx.rect(52, -57.25, 4, 10);
      // restore initial state of canvas
      ctx.restore();
      ctx.fillStyle = '#333';
      ctx.fill();
    },
    update: function (_angle) {
      if (_angle < this.minAngle) {
        _angle = this.minAngle;
      }
      if (_angl.........完整代码请登录后点击上方下载按钮下载查看