来源：未知 时间：2022-07-05 21:37 作者：小飞侠 阅读:次
[导读] canvas画箭头并跟随鼠标转动 代码如下： headmetacharset=utf-8/title/title!--scriptsrc=js/tools.js/scriptscriptsrc=js/arrow.js/script--script//将tools定义为window对象的属性，该属性的值是一个对象window.tools={...
|
canvas画箭头并跟随鼠标转动 代码如下： <head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="js/tools.js"></script>
<script src="js/arrow.js"></script> -->
<script>
//将tools定义为window对象的属性，该属性的值是一个对象
window.tools = {};
//获取鼠标指针位置
window.tools.getMouse = function (element) {
//定义一个mouse的对象
var mouse = { x: 0, y: 0 };
//为传入的元素添加mousemove事件
element.addEventListener("mousemove", function (e) {
var x, y;
//在IE中，event对象是作为window对象的一个属性存在
var e = e || window.event;
//获取鼠标指针当前位置，并作兼容处理
//兼容Firefox、chrome、IE9及以上
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
//兼容IE8及以下，以及混杂模式下的Chrome和Safari
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//将当前的坐标值减去canvas元素的偏移位置，则x、y为鼠标指针在canvas中的相对坐标值
x -= element.offsetLeft;
y -= element.offsetTop;
mouse.x = x;
mouse.y = y;
})
//返回值为mouse对象
return mouse;
}
function Arrow(x,y,color,angle)
{
//箭头中心的横坐标，默认值为0
this.x = x || 0;
//箭头中心的纵坐标，默认值为0
this.y = y || 0;
//颜色，默认值为“#FF0099”
this.color = color || "#FF0099";
//旋转角度，默认值为0
this.angle = angle || 0;
}
Arrow.prototype = {
stroke: function (cxt) {
cxt.save();
cxt.translate(this.x, this.y);
cxt.rotate(this.angle);
cxt.strokeStyle = this.color;
cxt.beginPath();
cxt.moveTo(-20, -10);
cxt.lineTo(0, -10);
cxt.lineTo(0, -20);
cxt.lineTo(20, 0);
cxt.lineTo(0, 20);
cxt.lineTo(0, 10);
cxt.lineTo(-20, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
},
fill: function (cxt) {
cxt.save();
cxt.translate(this.x, this.y);
cxt.rotate(this.angle);
cxt.fillStyle = this.color;
cxt.beginPath();
cxt.moveTo(-20, -10);
cxt.lineTo(0, -10);
cxt.lineTo(0, -20);
cxt.lineTo(20, 0);
cxt.lineTo(0, 20);
cxt.lineTo(0, 10);
cxt.lineTo(-20, 10);
cxt.closePath();
cxt.fill();
cxt.restore();
}
};
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个箭头，某中心坐标为画布中心坐标
var arrow = new Arrow(cnv.width / 2, cnv.height / 2);
//获取鼠标指针坐标
var mouse = tools.getMouse(cnv);
(function drawFrame() {
window.requestAnimationFrame(drawFrame, cnv);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var dx = mouse.x - cnv.width / 2;
var dy = mouse.y - cnv.height / 2;
//使用Math.atan2()函数计算出鼠标指针与箭头中心的夹角
arrow.angle = Math.atan2(dy, dx);
arrow.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
