Холст HTML jQuery мобильная проблема

Я - Тринг, чтобы использовать "touchstart" мобильное событие и холст HTML5, чтобы потянуть что-то, используя мобильный jQuery!

Я использую этот HTML-код:

Canvas is not supported

и код Js:

canvas = document.getElementById('canvasTouch');        
context = canvas.getContext('2d');

$(document).bind("touchstart",function(event) {    
    context.beginPath();
    context.arc(event.originalEvent.targetTouches[0].pageX,event.originalEvent.targetTouches[0].pageY, 10, 0, Math.PI*2); 
    context.fill();
    context.closePath();
}

Но мой круг похож на эллипсис и вполне запятнан!

Я попробовал этот код классической страницей HTML, и он хорошо работает на моем устройстве...

У вас есть какая-либо идея?

Спасибо

1
nl ja de

1 ответы

Вы установили ширину контекста и высоту к правильным значениям (как правило, размеры элемента холста)?

Наличие различных размеров между элементом и контекстом сломается 1:1, пиксель, наносящий на карту вас, мог бы ожидать, вызывая искажение и размывание. Если вы изменяете размер элемента с признаками или сценариями, это особенно важно (первое, что пришло на ум, я не помню, когда он автоизменяет размер контекста).

2
добавлено
Устанавливая признак ширины или высоты элемента холста в JavaScript (canvas.width = canvas.width;) изменение размера контекста должно немедленно следовать за сбросом контекста к его состоянию по умолчанию.
добавлено автор DerekR, источник
Расширяясь от ответа peachykeens, I' m собирающийся предполагать есть или стиль css, изменяющий размеры дисплея холста, или вы измерили холст с преобразованием как context.scale (2,1).
добавлено автор DerekR, источник
Попытка @user1948593, явно устанавливающая размер контекста в element' s размер (это doesn' t имеют значение если it' s не квадратный, пока это соответствует container' s размер), и делают абсолютно уверенными, что ничто не изменяет его после этого (включая CSS и отмеченный DerekR).
добавлено автор ssube, источник
На самом деле я установил холст element' s размер, используя сценарий JavaScript и window.innerwidth/height и его высоту приблизительно 1.5 его ширины! Так мой холст isn' t квадрат! Таким образом, что я должен сделать?
добавлено автор user1948593, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing