HTML5画布绘图坐标系统问题答案

【问题标题】：HTML5 canvas drawing coordinates system issueHTML5画布绘图坐标系统问题
【发布时间】：2012-12-07 12:44:09
【问题描述】：

我试图在画布中创建矩形，我对画布的坐标系有点困惑

    <!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）（正方形）的矩形，但它正在创建完整的正方形。

我知道这可能是我的简单错误，但请你帮我解决一下。

【问题讨论】：

标签： html html5-canvas

【解决方案1】：

您需要使用 width 和 height 属性设置画布的大小，如果您使用 css 来调整它的大小，那么它将缩放默认大小而不是成为您想要的大小，这就是它被这样扭曲的原因。

我已经用属性集更新了你的 jsfiddle，你会看到它现在是方形的。

【讨论】：

【解决方案2】：

解决的问题，

宽度和高度属性的愚蠢错误

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

【讨论】：