HTML 5画布线显得扭曲

时间:2014-04-08 06:34:46

标签: html5 canvas

我正在尝试在500px x 500px画布上制作网格:

<canvas id="area" style="width: 500px; height: 500px;"></canvas>


 var canvas = document.getElementById('area');
     var context = canvas.getContext('2d');

for (var x = 0.5; x < 500; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 500);
}

for (var y = 0.5; y < 500; y += 10) {
  context.moveTo(0, y);
  context.lineTo(500, y);
}

context.strokeStyle = "#eee";
context.stroke();

代码看起来对我来说是正确的,但由于某种原因它的出现拉长和像素化:

http://jsfiddle.net/DK4m7/1/

有人知道为什么会这样吗?

1 个答案:

答案 0 :(得分:5)

避免使用CSS设置画布大小,而是:

<canvas id="area" width=500 height=500></canvas>

使用CSS只会拉伸画布'位图的当前大小,默认为350 x 150像素。您需要使用width和height属性专门定义位图大小。

<强> Modified fiddle