無法在jQuery UI對話框中制作方形畫布

Question

我要做的就是使對話框中的畫布成為完美的正方形。 由於某些原因，它使渲染的高度大於寬度。

以下是我的代碼的最低版本，該版本重復了該問題。 至少在Firefox和Chrome中。

$(function() {
  var docwidth = $(document).outerWidth();
  var modalwidth = (docwidth > 767) ? 750 : 450;

  // #pscanvas is the div that wraps the canvas
  $("#pscanvas").width(modalwidth / 10 * 9).height(modalwidth / 10 * 9);

  // #psc is the canvas itself
  $("#psc").width(modalwidth / 10 * 9).height(modalwidth / 10 * 9);

  // #psc-dialog is the dialog div
  $("#psc-dialog").dialog({
    autoOpen: false,
    width: modalwidth
  });
  $("#psc-dialog").dialog("open");
});

這是一個---> jsFiddle

如何使畫布（帶有黑色邊框）成為正方形？

Answer 1

代替使用jQuery.width()和jQuery.height()方法，而是使用HTMLElement width和height屬性，因為Canvas元素不考慮CSS屬性。

$(function() {
  var docwidth = $(document).outerWidth();
  var modalwidth = (docwidth > 767) ? 750 : 450;
  $("#psc-dialog").width(modalwidth).height(modalwidth + 25);
  $("#pscanvas").width(modalwidth / 10 * 9).height(modalwidth / 10 * 9);
  $("#psc").get(0).width = (modalwidth / 10 * 9);
  $("#psc").get(0).height = (modalwidth / 10 * 9);
  $("#psc-dialog").dialog({
    autoOpen: false
  });
  $("#psc-dialog").dialog("open");
});

小提琴演示