Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2014, 16:14
Профессор
Отправить личное сообщение для imedia Посмотреть профиль Найти все сообщения от imedia
 
Регистрация: 20.05.2014
Сообщений: 292

canvas рисование окружности
Почему получается элипс при таком исполнении и как добиться круга на canvas тех же размеров
<html>
<head>
<script src="/js/jquery-1.9.1.min.js"></script>
<style>
#canvas /* стили для canvas*/
{
    position:absolute;
	top:0px;
	left:0px;
    width:300px; /*ширина*/
    height:300px; /*высота*/
    display:block; /*превратим элемент в блочный*/
    background:rgba(255,255,255,0.5); /*цвет фона*/
    border: 1px solid black; /*рамка*/
	
}
</style>
</head>
<body>
<canvas id="canvas"> Браузер не поддерживает canvas</canvas>
<script>
// обработчик события onload , литерал будет вызван после полной загрузки документа
//и построения его обьектной модели
  
window.onload = function (){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
//координаты центра окружности (распологается в центре холсте)
var x = canvas.width /2;
var y = canvas.height / 2;
 
//радиус 100px
var radius = 50;
 
//начальный и конечный углы (тригонометрия x_X)
var startAngle = 15*Math.PI/7;
var endAngle = 13*Math.PI/2;
var counterClockwise = true;//направление дуги. По умолчанию false
 
//ширина и цвет круга
context.lineWidth = 10;
context.strokeStyle = 'blue';
 
//начало пути, рисуем круг с нашими параметрами и обводим
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
}


</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2014, 16:29
Аватар для nice_try
Профессор
Отправить личное сообщение для nice_try Посмотреть профиль Найти все сообщения от nice_try
 
Регистрация: 11.12.2013
Сообщений: 313

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
    </script>
  </body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 30.05.2014, 17:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,309

imedia,
размеры ставьте в тег а не в стиль
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Рисование линий на JS без canvas grego Events/DOM/Window 3 17.10.2013 11:34
Рисование линии на CANVAS essere Элементы интерфейса 16 31.07.2013 18:17
Рисование окружности в JS gerons Элементы интерфейса 2 14.05.2013 06:37
рисование прямоугольника по движению мыши prizrak39 Events/DOM/Window 4 14.03.2013 14:36
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16