按住滑鼠可以拖動箭頭旋轉程式碼例項

admin發表於2017-02-10
分享一段程式碼例項，它實現了按住滑鼠就可以拖動箭頭旋轉效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
 * {
  padding: 0;
  margin: 0;
}
</style>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #555;margin: 0 auto;"></canvas>
<script>
var arrow = function() {
  this.x = 0;
  this.y = 0;
  this.color = "#f90"
  this.rolation = 0;
}
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d');
arrow.prototype.draw = function(ctx) {
  ctx.save();
  ctx.translate(this.x, this.y);
  ctx.rotate(this.rolation)
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.moveTo(0, 15);
  ctx.lineTo(-50, 15);
  ctx.lineTo(-50, -15);
  ctx.lineTo(0, -15);
  ctx.lineTo(0, -35);
  ctx.lineTo(50, 0);
  ctx.lineTo(0, 35);
  ctx.closePath()
  ctx.fill();
  ctx.restore();
}
var Arrow = new arrow();
Arrow.x = canvas.width / 2;
Arrow.y = canvas.height / 2;
 
var c_x, c_y; //相對於canvas座標的位置；
var isMouseDown = false;
Arrow.draw(ctx)
canvas.addEventListener('mousedown', function(e) {
  isMouseDown = true;
}, false)
 
canvas.addEventListener('mousemove', function(e) {
  if (isMouseDown == true) {
    c_x = getPos(e).x - canvas.offsetLeft;
    c_y = getPos(e).y - canvas.offsetTop;
    //setInterval(drawFram,1000/60)
    requestAnimationFrame(drawFram)
  }
}, false)
 
canvas.addEventListener('mouseup', function(e) {
  isMouseDown = false;
}, false)
 
function drawFram() {
  var dx = c_x - Arrow.x;
  var dy = c_y - Arrow.y;
  Arrow.rolation = Math.atan2(dy, dx);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  Arrow.draw(ctx)
}
 
function getPos(e) {
  var mouse = {
    x: 0,
    y: 0
  }
  var e = e || event;
  if (e.pageX || e.pageY) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
  } else {
    mouse.x = e.pageX + document.body.scrollLeft + document.document.documentElement.scrollLeft;
    mouse.y = e.pageY + document.body.scrollTop + document.document.documentElement.scrollTop;
  }
  return mouse;
}
</script>
</body>
</html>

相關文章