Question

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

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

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

Answer 1

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

我已经使用设置的属性更新了你的jsfiddle，你会发现它现在是方形的。

Answer 2

解决了问题，

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

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

HTML5画布绘制坐标系统问题

2 个答案: