如何更改html5画布的尺寸，而不缩放内容 [英] how to change dimensions of html5 canvas without it scaling content

问题描述

我的画布像这样：

 < canvas id =canvasDivwidth =20height = 20>< / canvas> 
  

和代码中的某处我想将其调整为最终大小：

  var canvas = document.getElementById（canvasDiv）; 
 canvas.style.width = 200; 
 canvas.style.height = 100;但是，在我的画布上绘制的任何像素都是缩放的（所以它不再是1像素）。    / p> 
 
 
如何在不使用缩放效果的情况下更改画布的尺寸？ （以编程方式）
解决方案
我想你只需要设置它的宽度& height属性：
  canvas.width = 200; 
 canvas.height = 100; 
  
 
I init my canvas like this:
<canvas id="canvasDiv" width="20" height="20"></canvas>
and somewhere in the code I want to resize it to it's final size:
var canvas = document.getElementById("canvasDiv");
canvas.style.width = 200;
canvas.style.height = 100;
However, any pixel I plot on my canvas is scaled (so it's not 1 pixel anymore).

How does one change the dimensions of a canvas without this scaling effect? (So programmatically)
解决方案
I think you just need to also set its width & height properties:
canvas.width = 200;
canvas.height = 100;


                        
这篇关于如何更改html5画布的尺寸，而不缩放内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！