通過單擊畫布上的兩個點來繪制矩形

Question

我想通過點擊畫布上的兩個點來繪制一個矩形。 我需要得到第一個點的x，y坐標，使用strokeRect在第二個點擊時繪制矩形。

這是我到目前為止所擁有的。

var rectangle = 0;

function plot_pt(event){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if(rectangle==1){
  ctx.moveTo(clx, cly);
  clx = event.clientX-c.offsetLeft;
  cly = event.clientY-c.offsetTop;
if(rectangle != 0){
rectangle++;
} else {
ulx = event.clientX-c.offsetLeft;
uly = event.clientY-c.offsetTop;
ctx.beginPath();
ctx.moveTo(ulx, uly);
ctx.strokeRect(50, 50, 120, 140);
ctx.stroke();

Answer 1

您需要的第一件事是獲取點擊的位置。您需要在click找到top和left值。 為此，你可以使用javascript或jquery 。

這是代碼。

 $('.clickable').bind('click', function (ev) { var $div = $(ev.target); var $display = $div.find('.display'); var offset = $div.offset(); var x = ev.clientX - offset.left; var y = ev.clientY - offset.top; $display.text('x: ' + x + ', y: ' + y); }); 

 .clickable { border: 1px solid #333; background: #eee; height: 200px; width: 200px; margin: 15px; position: absolute; } .display { display: block; height: 16px; position: absolute; text-align: center; vertical-align: middle; width: 100%; top: 50%; margin-top: -8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='clickable'> <span class='display'></span> </div> 

現在，在獲得坐標后，您可以輕松地在畫布上繪制矩形。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(x,y,width,height);
ctx.stroke();

Answer 2

這就是你需要的。 只需要妥善處理你的條件。

 var rectangle = 0; function plot_pt() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); if (rectangle == 0) { clx = event.clientX - c.offsetLeft; cly = event.clientY - c.offsetTop; ctx.moveTo(clx, cly); rectangle++; } else { ulx = event.clientX - c.offsetLeft; uly = event.clientY - c.offsetTop; ctx.beginPath(); ctx.moveTo(ulx, uly); ctx.strokeRect(clx, cly, ulx - clx, uly - cly); ctx.stroke(); rectangle = 0; } } 

 canvas{ border:2px solid black; } 

 <canvas id="myCanvas" height="400" width="400" onclick="plot_pt()"></canvas> 

如果你需要修改高度，只需改變ctx.strokeRect(clx, cly, ulx - clx, uly - cly); to ctx.strokeRect(clx, cly, ulx - clx, 100); 或你想要的高度和類似的寬度也。 希望能幫助到你。

Answer 3

奇跡般有效。 你想要的是什么：

 $(document).ready(function() { const canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); let firstClick = true; let firstX, firstY; $(canvas).click(function(e) { if (firstClick) { ({ x: firstX, y: firstY } = getMousePos(canvas, e)); $('#firstX').html(firstX); $('#firstY').html(firstY); firstClick = false; } else { let { x: secondX, y: secondY } = getMousePos(canvas, e); let width = secondX - firstX; let height = secondY - firstY; ctx.strokeRect(firstX, firstY, width, height); $('#secondX').html(secondX); $('#secondY').html(secondY); $('#width').html(width); $('#height').html(height); firstClick = true; } }); function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <p><span id="firstX"></span>, <span id="firstY"></span></p> <p><span id="secondX"></span>, <span id="secondY"></span></p> <p><span id="width"></span>, <span id="height"></span></p>