Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.06.2015, 22:47
Аспирант
Отправить личное сообщение для Tit6ka Посмотреть профиль Найти все сообщения от Tit6ka
 
Регистрация: 06.02.2013
Сообщений: 30

Почему деформируется канвас
При росте зеленого круга, серый круг начинает деформироваться. Как решить?
var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');
                    var centerX = 100;
                    var centerY = 100;
                    var radius = 80;

                    context.beginPath();
                    context.arc(centerX, centerY, radius, 0, 8);
                    context.fillStyle = '#EEEEEE';
                    context.fill();
                    context.lineWidth = 25;
                    context.strokeStyle = '#D9DBD8';
                    context.stroke();

                    context.beginPath();
                  context.arc(centerX, centerY, radius, 85 * (Math.PI / 180), 360/100 * (95.0833333333 - 175) * (Math.PI / 180));
                    context.fillStyle = '#EEEEEE';
                    context.fill();
                    context.lineWidth = 15;
                    context.strokeStyle = '#8AAD77';
                    context.stroke();
                    var centerX = canvas.width/2;
                    var centerY = canvas.height/2;
                    context.fillStyle = "#8AAD77";
                    context.font = "50pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText(8, centerX,centerY);
                    context.fillStyle = "#D9DBD8";
                    context.font = "20pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText("lvl", centerX,centerY+40);

https://jsfiddle.net/nanm5eym/

Последний раз редактировалось Tit6ka, 12.06.2015 в 22:50.
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2015, 23:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Tit6ka,
<canvas id="myCanvas" width="200" height="200"></canvas>
                    <script>
                    var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');
                    var centerX = 100;
                    var centerY = 100;
                    var radius = 80;

                    context.beginPath();
                    context.arc(centerX, centerY, radius+10, 0, 8);
                    context.fillStyle = '#EEEEEE';
                    context.fill();
                    context.lineWidth = 5;
                    context.strokeStyle = '#D9DBD8';
                    context.stroke();

                    context.beginPath();
                    context.arc(centerX, centerY, radius, 85 * (Math.PI / 180), 360/100 * (80.0833333333 - 175) * (Math.PI / 180));
                    context.fillStyle = '#EEEEEE';
                    context.lineWidth = 15;
                    context.strokeStyle = '#8AAD77';
                    context.stroke();
                    var centerX = canvas.width/2;
                    var centerY = canvas.height/2;
                    context.fillStyle = "#8AAD77";
                    context.font = "50pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText(8, centerX,centerY);
                    context.fillStyle = "#D9DBD8";
                    context.font = "20pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText("lvl", centerX,centerY+40);
                    </script>
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2015, 23:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Tit6ka,
1 пост строка 18 лишняя
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2015, 23:14
Аспирант
Отправить личное сообщение для Tit6ka Посмотреть профиль Найти все сообщения от Tit6ka
 
Регистрация: 06.02.2013
Сообщений: 30

спасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов конструктора без new. Почему не со всеми работает? danik.js Javascript под браузер 2 23.02.2014 00:09
Почему Java-версия интерфейсов Node имеет не стандартизованные имена? dump Общие вопросы Javascript 0 10.08.2012 13:19
Почему некоторые операторы возвращают значения, а не ссылки? dump Общие вопросы Javascript 15 25.07.2012 17:28
Свойства объекта, методы и this. Почему свойство вызывается с () ? jsuse Общие вопросы Javascript 2 04.11.2011 20:39
Почему не определяется втарая переменная? Арман Общие вопросы Javascript 3 09.04.2011 11:14