2011-11-06 12 views
8

Il risultato del bordo quadrato risulta essere di larghezza diversa, sembra che la larghezza del bordo destro e inferiore sia 2x più larga della larghezza sinistra e del bordo superiore. Perché così strano? Voglio che il bordo di tutti i lati abbia la stessa larghezza.HTML5 Canvas Draw Rect - Got Border of Diff Width?

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

risposta

7

Questo perché il bordo è stato tagliato in alto e la sinistra, perché è lì che inizia la tela, e se il vostro rettangolo inizia a (0,0), a sinistra del bordo sinistro la coordinata x di fine sarà -30.

Effettuare le coordinate di partenza superiori a 30 (in modo che la fine dei bordi non sia negativa) e funzionerà correttamente.

Demo