按下按钮后,我想在画布上的鼠标指针的尖端画一个圆圈,然后在用户再次点击时放置它 . 这是我到目前为止所得到的:
$("#button").click(function(e){
var canvas = document.getElementById('MyCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
console.log(message);
var nodehandle = document.getElementById('circle');
if(mousePos.x && mousePos.y) {
nodehandle.x = mousePos.x;
nodehandle.y = mousePos.y;
flag = 1;
}
}, false);
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
我的问题是当我画一个这样的圆圈时:
function drawCircle(mouseX, mouseY){
var c = document.getElementById("grid");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,5,0,2*Math.PI);
ctx.stroke();
}
我不知道如何选择那个圆圈(即使我把ctx.id ='circle'添加到drawCircle函数中,getElementById('circle')也会返回null) . 每次鼠标移动时我也需要擦除和重绘圆圈,我确信有一个很好的方法可以做到,但我不知道 .
1 回答
你在画布上绘制的任何东西 - 就像圆圈一样,就像画布上的干漆一样 .
您的圈子无法像html元素一样被选中或移动 .
要移动圆圈,您必须清除画布并在不同位置重绘圆圈 .
在对象中存储关于圆的信息很方便 .
您可以使用该信息绘制circle1:
对于超过1个圆,您可以创建一个圆形数组并将每个圆形对象放入该数组中
然后“移动”一个圆圈,只需将对象的centerX / centerY更改为鼠标位置,然后重绘画布上的所有圆圈 .
您可以使用Html单选按钮来确定鼠标单击将执行的操作:
在鼠标位置创建一个新圆圈,或
选择鼠标位置下的圆圈,或
"Move"当前选定的圆圈
这是示例代码和演示:http://jsfiddle.net/m1erickson/CEB7T/