2012-05-04 4 views
2

У меня есть холст на моей страницеИспользуйте html5 холст нарисуйте круг, но только показать часть его

<canvas id="oneCanvas" width="250px" heigth="250px"></canvas>​ 

я хочу нарисовать круг на нем

function drawCircle(theCanvas){ 
      var context=theCanvas.getContext('2d'); 
      context.beginPath(); 
      context.strokeStyle="#000000"; 
      context.lineWidth=50; 
      context.arc(125,125,70,(Math.PI/180)*0,(Math.PI/180)*270,false); 
      context.stroke(); 
      context.closePath(); 
     } 
     $(function(){ 
      var theCanvas=document.getElementById('oneCanvas'); 
      drawCircle(theCanvas); 
     });​ 

этот код есть проблема :

круг показывает только часть, а высота холста, кажется короткой, чем 250px

вот example

Так почему это произошло? Как я могу решить эту проблему?

ответ

1

В вашем коде heigth указан неправильно. Замыкающие h и t должны быть заменены: height.

<canvas id="oneCanvas" width="250" height="250"></canvas>​ 

Что касается «круга показывают только часть» проблемы: Если вы хотите, чтобы сделать полный круг, рисовать с нуля до 360 градусов. 270 градусов - всего три четверти круга.

// *270 changed to *360 
    context.arc(125, 125, 70, (Math.PI/180)*0, (Math.PI/180)*360, false); 
    //      ^^^^^^^^^^^^^^^ This is zero, by the way 

  http://jsfiddle.net/JLNY3/3/

Смежные вопросы