<分区>
谁能发布一个使用 HTML5 canvas 通过鼠标移动圆圈的简单解决方案?我已经阅读了各种框架(画架、织物、纸张等)- 虽然它们都很酷,但我只需要一个小圆圈来跟随鼠标指针,这不值得 100K+ 的代码。
标签 javascript html canvas
<分区>
谁能发布一个使用 HTML5 canvas 通过鼠标移动圆圈的简单解决方案?我已经阅读了各种框架(画架、织物、纸张等)- 虽然它们都很酷,但我只需要一个小圆圈来跟随鼠标指针,这不值得 100K+ 的代码。
最佳答案
我可能不应该在你没有尝试任何东西的情况下就把它送人。无论如何,你去吧,希望它有所帮助。
var canvas=document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 500;
var targetX = 0,
targetY = 0,
x = 10,
y = 10,
velX = 0,
velY = 0,
speed = 2;
function update(){
var tx = targetX - x,
ty = targetY - y,
dist = Math.sqrt(tx*tx+ty*ty),
rad = Math.atan2(ty,tx),
angle = rad/Math.PI * 180;
velX = (tx/dist)*speed,
velY = (ty/dist)*speed;
x += velX
y += velY
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.arc(x,y,5,0,Math.PI*2);
ctx.fill();
setTimeout(update,10);
}
update();
canvas.addEventListener("mousemove", function(e){
targetX = e.pageX;
targetY = e.pageY;
});
关于javascript - Canvas 绕圈移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13880785/
相关文章:
javascript - 如何使用代码检查浏览器中的弹出窗口阻止程序是否打开?
html - 基础顶部导航栏 : Increase Width
javascript - 点和线坐标之间的kineticjs关系
javascript - 捕获我的 Canvas 下的内容作为图像的一部分
javascript - 每个平台上的 XML、PDF 和 Office 文档的数字签名
javascript - 如何像javaScript中的函数一样执行String?
javascript - 在 Internet Explorer 中下载或显示 XML 文件