JavaScript畫布創建廣場

Question

我想繪製一個正方形，其功能如下。

如何修改以下函數來創建正方形。

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; 
     } 
    }; 
} 

Answer 1

這是你的幸運日！我只是在做這樣的事情。如果你用它做任何事情，一定要稱讚我！ ;）

請注意，圓形和橢圓形仍然是一項工作進行中。

鏈接的jsfiddle當我更新程序將被更新：JSFiddle

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var mx=300; 
 
var my=300; 
 
var currentObject = {}; 
 

 
document.onmousemove = function(e){ 
 
    mx=e.pageX-8; 
 
    my=e.pageY-8; 
 
} 
 
document.onmousedown = function(e){ 
 
    var obj = document.getElementById("objSel").value; 
 
    currentObject.type=obj; 
 
    if(obj=="Rectangle"||currentObject.type=="Square"){ 
 
    \t currentObject.x=e.pageX-8; 
 
    \t currentObject.y=e.pageY-8; 
 
    } 
 
} 
 
document.onmouseup = function(e){ 
 
    mx=e.pageX-8; 
 
    my=e.pageY-8; 
 
    objects.push(complete(currentObject)); 
 
    currentObject={}; 
 
} 
 

 
var objects = []; 
 

 
function render(){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(mx-5,my); 
 
    ctx.lineTo(mx+5,my); 
 
    ctx.moveTo(mx,my-5); 
 
    ctx.lineTo(mx,my+5); 
 
    ctx.strokeStyle="black"; 
 
    ctx.lineWidth=2; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
    if(currentObject.type=="Rectangle"){ 
 
    \t ctx.beginPath(); 
 
     ctx.rect(currentObject.x,currentObject.y,mx-currentObject.x,my-currentObject.y); 
 
     ctx.stroke(); 
 
    } 
 
    draw(complete(currentObject)); 
 
    for(var i=0;i<objects.length;i++){ 
 
     draw(objects[i]); 
 
    } 
 
} 
 
setInterval(render,5); 
 
render(); 
 

 
function complete(o){ 
 
    if(o.type=="Square"){ 
 
     var sidelength = Math.max(Math.abs(mx-o.x),Math.abs(my-o.y)); 
 
     var fix = function(input){ 
 
      if(input==0){ 
 
       return 1; 
 
      } else { 
 
       return input; 
 
      } 
 
     }; 
 
    \t o.length=fix(Math.sign(mx-o.x))*sidelength; 
 
    \t o.height=fix(Math.sign(my-o.y))*sidelength; 
 
    } else if(o.type=="Rectangle"){ 
 
    \t o.length=mx-o.x; 
 
    \t o.height=my-o.y; 
 
    } 
 
    return o; 
 
} 
 

 
function draw(o){ 
 
    if(o.type=="Square"||o.type=="Rectangle"){ 
 
    \t ctx.beginPath(); 
 
     ctx.rect(o.x,o.y,o.length,o.height); 
 
     ctx.stroke(); 
 
    } 
 
}

<canvas id="canvas" style="border:1px solid black;" width="500" height="500">Please use a browser that supports the canvas element and make sure your Javascript is working properly.</canvas> 
 
<br> 
 
<span id="testing"></span> 
 
<select id="objSel"> 
 
    <option>Square</option> 
 
    <option>Rectangle</option> 
 
    <option>Circle</option> 
 
    <option>Oval</option> 
 
</select>

Answer 2

這裏是一個返工：

var Square; 
 
(function(Square) { 
 
    var canvas = document.body.appendChild(document.createElement("canvas")); 
 
    canvas.style.border = "1px solid"; 
 
    canvas.width = 800; 
 
    canvas.height = 800; 
 
    var context = canvas.getContext("2d"); 
 
    var drawing = false; 
 
    var square = { 
 
    x: 0, 
 
    y: 0, 
 
    w: 0, 
 
    h: 0, 
 
    color: getColor() 
 
    }; 
 
    var persistentSquares = []; 
 

 
    function getColor() { 
 
    return "rgb(" + 
 
     Math.round(Math.random() * 255) + ", " + 
 
     Math.round(Math.random() * 255) + ", " + 
 
     Math.round(Math.random() * 255) + ")"; 
 
    } 
 

 
    function draw() { 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    for (var pSquareIndex = 0; pSquareIndex < persistentSquares.length; pSquareIndex++) { 
 
     var pSquare = persistentSquares[pSquareIndex]; 
 
     context.fillStyle = pSquare.color; 
 
     context.fillRect(pSquare.x, pSquare.y, pSquare.w - pSquare.x, pSquare.h - pSquare.y); 
 
     context.strokeRect(pSquare.x, pSquare.y, pSquare.w - pSquare.x, pSquare.h - pSquare.y); 
 
    } 
 
    context.strokeRect(square.x, square.y, square.w - square.x, square.h - square.y); 
 
    } 
 
    canvas.onmousedown = function(evt) { 
 
    square.x = evt.offsetX; 
 
    square.y = evt.offsetY; 
 
    square.w = evt.offsetX; 
 
    square.h = evt.offsetY; 
 
    drawing = true; 
 
    requestAnimationFrame(draw); 
 
    }; 
 
    canvas.onmousemove = function(evt) { 
 
    if (drawing) { 
 
     square.w = evt.offsetX; 
 
     square.h = evt.offsetY; 
 
     requestAnimationFrame(draw); 
 
    } 
 
    }; 
 

 
    function leave(evt) { 
 
    if (!drawing) { 
 
     return; 
 
    } 
 
    square.w = evt.offsetX; 
 
    square.h = evt.offsetY; 
 
    drawing = false; 
 
    persistentSquares.push(square); 
 
    square = { 
 
     x: 0, 
 
     y: 0, 
 
     w: 0, 
 
     h: 0, 
 
     color: getColor() 
 
    }; 
 
    requestAnimationFrame(draw); 
 
    }; 
 
    canvas.onmouseup = leave; 
 
    canvas.onmouseleave = leave; 
 
})(Square || (Square = {}));