2011-11-06 37 views
8

Kết quả của đường viền hình vuông có chiều rộng khác nhau, có vẻ như chiều rộng bên phải và đường viền dưới rộng gấp 2 lần chiều rộng của đường viền trái và đường viền trên cùng. Tại sao rất lạ? Tôi muốn biên giới của tất cả các bên có cùng chiều rộng.HTML5 Canvas Vẽ Rect - Có biên giới của chiều rộng Diff?

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

Trả lời

7

Đó là bởi vì biên giới của bạn đang được cắt ở phía trên và bên trái, bởi vì đó là nơi canvas bắt đầu, và nếu hình chữ nhật của bạn bắt đầu tại (0,0), bên trái viền trái của cuối cùng của x phối hợp sẽ là -30.

Làm cho điều phối bắt đầu bất cứ điều gì trên 30 (để kết thúc biên giới của bạn không âm) và nó sẽ hoạt động tốt.

Demo

Các vấn đề liên quan