0

キャンバスに長方形を作成しようとしましたが、キャンバスの座標系と少し混乱しています

    <!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)(square) の長方形を作成しましたが、完全な正方形を作成しています。 ここに画像の説明を入力

私の単純なミスかもしれませんが、助けていただけませんか。

4

2 に答える 2