如何更改html5画布的尺寸,而不缩放内容 [英] how to change dimensions of html5 canvas without it scaling content
本文介绍了如何更改html5画布的尺寸,而不缩放内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的画布像这样:
< 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屋!
查看全文