html5 canvas实现跟随鼠标旋转的箭头_html5教程技巧

作者：匿名字体：[增加减小] 来源：互联网时间：2018-12-03

本文主要包含html5,canvas,箭头旋转,鼠标跟随等相关知识,匿名希望在学习及工作中可以帮助到您

本文实例为大家分享了

>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>canvas实现跟随鼠标旋转的箭头title>
<style>
*{padding: 0;margin: 0}
style>
head>
<body>
<canvas width="500" height="500" style="border: 1px solid #555; display: block;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=

相关文章