Question

我要实现的目标是单击缩小按钮来更改画布的高度宽度。但是画布的高度宽度没有变化。问题是CSS是内联的并且是动态添加的。

HTML

var a = 'SG 925|AMD-MAA|19:15|21:40|SG 703|VNS-BOM|19:45|22:05'
const arr = a.split('|')
const objArr = []

for (var i = 0; i < arr.length; i+=4) {
	objArr.push({
  	name: arr[i],
        place: arr[i+1],
        from: arr[i+2],
        to: arr[i+3]
  })
}

console.log(objArr)

$(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'

});

站点链接可更好地了解画布如何添加link

Answer 1

请勿使用CSS样式来调整画布大小。分别设置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>

调整画布onclick按钮的大小

1 个答案: