css - 调整 Canvas 大小 onclick 按钮

Question

我想要实现的点击缩小按钮改变 Canvas 的高度宽度。但 Canvas 高度宽度没有改变。问题是 CSS 是内联的并且是动态添加的。

HTML

$(document.body).on('click', '#zoom-in', function() {

  var canvas = document.getElementsByTagName('canvas')[1];
  console.log(canvas);
  canvas.width = 1200;
  canvas.height = 600;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  canvas.width = 400;
  canvas.height = 300;
  canvas.style.width = '800px !important';
  canvas.style.height = '600px !important'

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fpd-view-stage" style="width: 1200px; height: 600px; position: 
relative; user-select: none;">

  <canvas class="lower-canvas" width="1200" height="600" style="position: 
  absolute; width: 1200px; height: 600px; left: 0px; top: 0px; touch-action: 
  none; user-select: none;"></canvas>

  <canvas class="upper-canvas " width="1200" height="600" style="position: 
  absolute; width: 1200px; height: 600px; left: 0px; top: 0px; touch-action: 
  none; user-select: none; cursor: pointer;"></canvas>

  <a href="javascript:void(0);" id="zoom-in">Zoom in</a>

  <a href="javascript:void(0);" id="zoom-out">Zoom out</a>

</div>

用于更好地了解如何添加 Canvas 的站点链接 link

Answer 1

不要使用 CSS 样式来调整 Canvas 大小。分别为宽度和高度设置 canvas.width 和 canvas.height。

演示

$(document).on('click', '#zoom-in', function() {
  var canvas = document.getElementsByTagName('canvas')[1];
  //var ctx = canvas.getContext("2d");
  //ctx.clearRect(0, 0, canvas.width, canvas.height);
  canvas.width = 400;
  canvas.height = 300;
});

.lower-canvas{
  border:1px solid #000;
}
.upper-canvas{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fpd-view-stage" style="width: 1200px; height: 600px; position: 
relative; user-select: none;">

  <canvas class="lower-canvas" width="1200" height="600" style="position: 
  absolute; left: 0px; top: 0px; touch-action: 
  none; user-select: none;"></canvas>

  <canvas class="upper-canvas " width="1200" height="600" style="position: 
  absolute; left: 0px; top: 0px; touch-action: 
  none; user-select: none; cursor: pointer;"></canvas>

</div>
  <a href="javascript:void(0);" id="zoom-in">Zoom in</a>

  <a href="javascript:void(0);" id="zoom-out">Zoom out</a>