2016-10-05 10 views
0

Я использую объект canvas с использованием JavaScript и как-то Internet Explorer (не спрашивайте, мне нужно), версия 11 масштабирует рисунки вдоль оси x.HTML Холст-шкалы вдоль оси x? (Использование Internet Explorer)

Вот код JavaScript:

var c = document.getElementById('canvas1'); 
var ctx = c.getContext('2d'); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fillStyle = '#000000'; 
ctx.lineWidth = 5; 
ctx.stroke(); 

Вы ожидали бы, что круг появится. Но вместо этого я получаю Ellipse:

(.. Не возражаете горизонтальную линию слева, что только окружающий ДИВ Полотно маленький квадрат)

EDIT: Размер холста 100 х 100.

+0

Вы как-то устанавливаете некоторую ширину или высоту с помощью CSS на этом плохом холсте? Если это так, остановитесь прямо сейчас и используйте собственные атрибуты 'width' и' height'. – Kaiido

+0

Только атрибуты 'width' и' height'? Или есть другие атрибуты, которые вы должны установить внутри тега html? – elementzero23

+0

Просто не устанавливайте его через CSS, по крайней мере, пока не поймете, что он делает. Затем вы будете помнить, что всегда устанавливаете его, соблюдая пропорции вашего контекста. И нет, никаких других атрибутов не требуется. – Kaiido

ответ

0

Следуя за комментариями, ответом является установка высоты и ширины объекта canvas в качестве атрибутов тега canvas. Пример:

<canvas height="200" width="400"></canvas> 

См. this post для более подробного объяснения.