[英]Rectangle on HTML5 Canvas is stretched
I am working on a website and I try to get rectangles on a HTML5 canvas with javascript. 我正在一个网站上工作,我尝试使用javascript在HTML5画布上获取矩形。 Normally this is no problem but now when I make a rectangle with the width and height of 10. It seems that it makes a rectangle with the width of 10 and the height of 20.
通常情况下这没问题,但现在当我制作一个宽度和高度为10的矩形时。它似乎是一个宽度为10,高度为20的矩形。
I'm making the Rectangle like this: 我正在制作像这样的矩形:
var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(0, 0, 10, 10);
The div canvas is set with a width of 100% but i tried to give it a fixed width and that didn't help either. div画布设置宽度为100%,但我试图给它一个固定的宽度,这也没有帮助。
You need to set a width and height on your canvas element, otherwise this can be the result in some browsers. 您需要在canvas元素上设置宽度和高度,否则这可能是某些浏览器的结果。
<canvas id="canvas" width="400" height="300" />
And you can not set the canvas size with CSS, this will stretch the canvas. 并且您无法使用CSS设置画布大小,这将拉伸画布。
The default size of the canvas is 300 x 150. 画布的默认大小为300 x 150。
You are probably using these defaults, which will make the rectangle look not square.... 您可能正在使用这些默认值,这将使矩形看起来不正方形....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.