Canvas được kéo dài khi sử dụng CSS nhưng bình thường với các thuộc tính chiều cao

Tôi có 2 canvas, một sử dụng các thuộc tính HTML widthvà heightđể kích thước nó, cái còn lại sử dụng CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 hiển thị như nó cần, nhưng không phải compteur2. Nội dung được vẽ bằng JavaScript trên khung vẽ 300x300.

Tại sao có sự khác biệt hiển thị?

Có vẻ như widthvàheight thuộc tính xác định chiều rộng hoặc chiều cao của hệ tọa độ của khung vẽ, trong khi các thuộc tính CSS chỉ xác định kích thước của hộp trong đó nó sẽ được hiển thị.

Điều này được giải thích tại http://www.whatwg.org/html#attr-canvas- thong (cần JS) hoặc http://www.whatwg.org/c#attr-canvas- thong (có thể sẽ ăn máy tính của bạn) :

Phần canvastử có hai thuộc tính để kiểm soát kích thước của bitmap của phần tử: widthvà height. Các thuộc tính này, khi được chỉ định, phải có các giá trị là số nguyên không âm hợp lệ . Các quy tắc phân tích số nguyên không âm phải được sử dụng để thu được các giá trị số của chúng. Nếu một thuộc tính bị thiếu hoặc nếu phân tích giá trị của nó trả về lỗi, thì giá trị mặc định phải được sử dụng thay thế. Các widthgiá trị mặc định thuộc tính đến 300, và các heightgiá trị mặc định thuộc tính đến 150.

Để thiết lập widthvà heightbạn cần, bạn có thể sử dụng

canvasObject.setAttribute('width', '475');

Đối với <canvas>các phần tử, các quy tắc CSS cho widthvà heightđặt kích thước thực tế của phần tử canvas sẽ được vẽ vào trang. Mặt khác, các thuộc tính HTML của widthvà heightđặt kích thước của hệ tọa độ hoặc 'lưới' mà API canvas sẽ sử dụng.

Ví dụ, hãy xem xét điều này ( jsfiddle ):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Cả hai đều có cùng một thứ được vẽ trên chúng so với tọa độ bên trong của phần tử canvas. Nhưng trong khung vẽ thứ hai, hình chữ nhật màu đỏ sẽ rộng gấp đôi vì toàn bộ khung vẽ đang được kéo dài trên một diện tích lớn hơn theo quy tắc CSS.

Lưu ý: Nếu quy tắc CSS cho widthvà / hoặc heightkhông được chỉ định thì trình duyệt sẽ sử dụng các thuộc tính HTML để định kích thước cho phần tử sao cho 1 đơn vị của các giá trị này bằng 1px trên trang. Nếu những thuộc tính này không được chỉ định sau đó họ sẽ mặc định một widthsố 300và một heightcủa 150.

Khung vẽ sẽ được kéo dài nếu bạn đặt chiều rộng và chiều cao trong CSS của mình. Nếu bạn muốn tự động thao tác kích thước của khung vẽ, bạn phải sử dụng JavaScript như sau:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Trình duyệt sử dụng chiều rộng và chiều cao css, nhưng tỷ lệ phần tử canvas dựa trên chiều rộng và chiều cao của khung vẽ. Trong javascript, đọc chiều rộng và chiều cao css và đặt chiều rộng và chiều cao của khung hình thành đó.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Hiệu chỉnh Shannimal

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

CSS đặt chiều rộng và chiều cao của phần tử canvas để nó ảnh hưởng đến không gian tọa độ khiến mọi thứ bị vẽ lệch

Đây là cách của tôi về cách đặt chiều rộng và chiều cao với Vanilla JavaScript

canvas.width = numberForWidth

canvas.height = numberForHeight

Nếu bạn muốn có một hành vi động dựa trên, ví dụ: truy vấn phương tiện CSS, không sử dụng các thuộc tính chiều rộng và chiều cao của khung vẽ. Sử dụng các quy tắc CSS và sau đó, trước khi lấy bối cảnh kết xuất canvas, gán cho các thuộc tính chiều rộng và chiều cao cho các kiểu chiều rộng và chiều cao CSS:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...