2011-11-06 3 views
8

사각형 테두리의 결과가 다른 너비로 밝혀졌습니다. 오른쪽 및 아래쪽 테두리의 너비가 왼쪽 및 위쪽 테두리의 너비보다 2 배 넓어 보입니다. 왜 그렇게 이상한가요? 나는 모든면의 경계가 같은 너비를 가지길 원한다.HTML5 캔버스 그리기 직사각형 - 너비 보더의 테두리가 있습니까?

<!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

답변

7

당신의 사각형 (0,0), 왼쪽 테두리의 왼쪽에서 시작하는 경우 끝의 x 좌표는 -30이됩니다.

시작 좌표가 30을 초과하여 (테두리가 음수가되지 않도록) 잘 작성됩니다.

Demo

관련 문제