HTML5畫布繪製座標系統問題

我試圖在畫布上創造矩形，我與協調帆布HTML5畫布繪製座標系統問題

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Dialog - Modal form</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <style> 
     body{ 
     background-color: #231F20;  
     } 
     #ribbonid{ 
      width:90px; 
      height: 90px; 
     } 
    </style>  
</head> 
<body> 
<canvas id='ribbonid' > </canvas> 
<script> 
    $(document).ready(function(){ 
var $ribbonid = $('#ribbonid'); 
// get the canvas element using the DOM 
    var canvas = document.getElementById('ribbonid'); 

    // Make sure we don't execute when canvas isn't supported 
    if (canvas.getContext){ 

    // use getContext to use the canvas for drawing 

    var cts = canvas.getContext('2d'); 

    cts.fillStyle = '#f7911e'; 


    cts.beginPath(); 
    cts.moveTo(0, 0); 
    cts.lineTo(90, 0); 
    cts.lineTo(90, 90); 
    cts.lineTo(0, 90); 
    cts.lineTo(0, 0); 
    cts.fill();  
    cts.closePath();  
    }   
    }); 

</script> 
</body> 
</html>

http://jsfiddle.net/bkf2e/

我所知canvas.rect功能的系統有點糊塗了，但我需要爲我創造一些不同的形狀。我創建了尺寸爲（90,90）（方形）的矩形，但它創建的是完整的正方形。 enter image description here

我知道這可能是我的簡單錯誤，但你能幫我解決這個問題。

來源

2012-12-07 Kasma

解決的問題，

它的寬度和高度的愚蠢的錯誤屬性

<canvas id='ribbonid' width='90' height='90' > </canvas>

來源

2012-12-07 04:44:09 Kasma

您需要使用寬度和高度屬性來設置畫布的大小，如果您使用css來調整大小，那麼它將縮放默認大小而不是變成您想要的大小，這就是爲什麼它會像這樣變形。

我已更新您的jsfiddle的屬性設置，你會發現它現在是方形的。

來源

2012-12-07 04:42:21

HTML5畫布繪製座標系統問題

回答

相關問題