Вопросы Теги

HTML5 Canvas Draw Rect - Got Border of Diff Width?

В результате квадратная граница оказывается разной ширины, кажется, что ширина правой и нижней границы в 2 раза шире, чем ширина левой и верхней границы. Почему так странно? Я хочу, чтобы границы со всех сторон были одинаковой ширины. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
  function draw () {
    var canvas = document.getElementById('rectangle');
    var ctx = canvas.getContext('2d');

    ctx.save();
    ctx.lineWidth = 30;
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,100,100);
    ctx.strokeStyle = "red";
    ctx.strokeRect(0,0,100,100);        
    ctx.restore();
  }
</script>
</head>

<body onload="draw()">
<canvas id="rectangle"></canvas>
</body>
</html>

enter image description here

8
задан Some Guy 22 August 2012 в 16:10
поделиться