Tại sao các hình chữ nhật tôi đang tạo trên canvas này không được đặt đúng vị trí?

Question

Tôi đang cố gắng tạo một trang đơn giản nơi bạn nhấp và có thể tạo hình chữ nhật trên canvas. Phải mất nhấp chuột của người dùng làm đầu vào, và sau đó tạo ra một hình chữ nhật từ x và y của nhấp chuột. Tuy nhiên, nó đặt hình chữ nhật ra bên cạnh một số tiền, và tôi không chắc chắn tại sao.

Fiddle: https://jsfiddle.net/2717s53h/

HTML

<canvas id="cnv"></canvas> 

CSS

#cnv{ 
    width:99vw; 
    height:98vh; 
    background-color:#faefbd; 
} 

JAVASCRIPT

$(function() { 
    var canvas = $('#cnv'); 
    var canvObj = document.getElementById('cnv'); 
    var ctx = canvObj.getContext('2d'); 

    var point1 = {}; 
    var point2 = {}; 

    canvas.click(function (e) { 
     console.log(e); 

     var x = e.pageX; 
     var y = e.pageY; 

     console.log(x); 
     console.log(y); 

     if (Object.keys(point1).length == 0) 
     { 
      point1.x = x; 
      point1.y = y; 
     } 
     else if (Object.keys(point2).length == 0) 
     { 
      point2.x = x; 
      point2.y = y; 

      console.log(point1); 
      console.log(point2); 
      var width = point2.x - point1.x; 
      var height = point2.y - point1.y; 
      width = width < 0 ? width * -1 : width; 
      height = height < 0 ? height * -1 : height; 
      ctx.fillRect(x, y, 10, 10); 

      point1 = {}; 
      point2 = {}; 
     } 

    }); 
}); 

Answer 1

Có sự khác biệt giữa chiều cao/chiều rộng CSS và thuộc tính canvas chiều cao và chiều rộng của HTML: trước đây xác định không gian canvas chiếm trên trang; sau này xác định bề mặt hiển thị . Trong concreto, giả sử bạn có bức tranh sau:

<canvas height="400" width="600"></canvas> 

với một khung nhìn có kích thước 1200x800 và CSS của vải được thiết lập để width: 100%; height: 100%;, sau đó canvas của bạn sẽ được trả lại như giơ gấp đôi lớn và mờ trong cả hai chiều cao và chiều rộng (như trong fiddle của bạn; rõ ràng những hình chữ nhật lớn hơn 10px). Kết quả là, tọa độ trang không được đồng bộ hóa với tọa độ canvas.

Theo specification, bề mặt vải vẽ của fiddle của bạn là 300x150 vì bạn đã không xác định chiều rộng/chiều cao thuộc tính: thuộc tính

Chiều rộng mặc định là 300, và thuộc tính chiều cao mặc định là 150.

Xem phiên bản hơi 'được sửa' của your fiddle. Kết quả là lời khuyên của tôi (với tư cách là một chuyên gia về HTML-canvas) sẽ là luôn chỉ định 2 thuộc tính đó và không gây rối với các bề mặt hiển thị khác nhau so với kích thước hiển thị (chắc chắn không phải là những thứ tương đối như vw, vh,%, em, ...) nếu bạn không muốn kết quả không thể đoán trước; mặc dù một số người dùng SO đã tìm kiếm a solution.