JavaScript画布创建正方形

我想画一个具有如下函数的正方形

如何修改以下函数以创建正方形

function square() {

    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
    };

    this.mousemove = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            context.lineTo(ev._x, ev._y);
            context.stroke();
        }
    };

    this.mouseup = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            tool.mousemove(ev);
            tool.started = false;
        }
    };
}

---

今天是你的幸运日！我只是在做这样的事情。如果你用它做任何事，一定要相信我

请注意，“圆形”和“椭圆形”仍在进行中

链接到我更新程序时将更新的JSFIDLE：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var mx=300；
var-my=300；
var currentObject={}；
document.onmousemove=函数（e）{
mx=e.pageX-8；
my=e.pageY-8；
}
document.onmousedown=函数（e）{
var obj=document.getElementById（“objSel”）.value；
currentObject.type=obj；
if（obj==“矩形”| | currentObject.type==“正方形”）{
currentObject.x=e.pageX-8；
currentObject.y=e.pageY-8；
}
}
document.onmouseup=函数（e）{
mx=e.pageX-8；
my=e.pageY-8；
push（完成（currentObject））；
currentObject={}；
}
var对象=[]；
函数render（）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（mx-5，my）；
ctx.lineTo（mx+5，车型年款）；
ctx.moveTo（mx，my-5）；
ctx.lineTo（mx，my+5）；
ctx.strokeStyle=“黑色”；
ctx.线宽=2；
ctx.stroke（）；
ctx.closePath（）；
if（currentObject.type==“矩形”）{
ctx.beginPath（）；
ctx.rect（currentObject.x，currentObject.y，mx currentObject.x，my currentObject.y）；
ctx.stroke（）；
}
绘制（完成（当前对象））；
对于（var i=0；i，这里有一个返工：


var平方；
（功能（方形）{
var canvas=document.body.appendChild（document.createElement（“canvas”）；
canvas.style.border=“1px solid”；
画布宽度=800；
帆布高度=800；
var context=canvas.getContext（“2d”）；
var绘图=错误；
var平方={
x:0,，
y:0，
w:0，
h:0，
颜色：getColor（）
};
var persistentSquares=[]；
函数getColor（）{
返回“rgb（”+
Math.round（Math.random（）*255）+“，”+
Math.round（Math.random（）*255）+“，”+
Math.round（Math.random（）*255）+“”；
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（var pSquareIndex=0；pSquareIndex})（Square | |（Square={}））
内置的
rect（）
方法有什么问题？@Feathercrown我的意思是用鼠标画一个正方形/rec我不知道如何修改函数来完成这一点你想让正方形实际放在鼠标上的画布上吗？谢谢，我会检查：）不客气！如果此答案对您有帮助，请务必使用。您应该使用
requestAnimationFrame
而不是
setInterval
，尤其是在5ms时，因为根据显示刷新情况，每2或3次渲染中只能看到1次或部分渲染rate@Blindman67我考虑过这一点。我可能以后再加进去。