Возникшие проблемы: html/11467.html">Причина, по которой элемент холста деформируется и искажается.
Существует три размера элемента DOM: размер стиля, размер HTML и размер CSS.
При использовании элемента холста ширина и высота элемента холста по умолчанию составляют 300 пикселей * 150 пикселей. Размер по умолчанию здесь — размер HTML.
Чтобы лучше понять, возьмем в качестве примера живопись. Монтажная область имеет размер CSS или размер стиля, а холст — размер HTML.
Если мы не отображаем размер html указанного элемента холста, а указываем его размер css в файле css. Результат очень запутанный.
Например, мы рисуем круг радиусом 50 пикселей на холсте по умолчанию размером 300 пикселей * 150 пикселей.
<html lang=zh><head> <meta charset=UTF-8> <title>размер холста</title> <style> #canvas { ширина: 200 пикселей; высота: 200 пикселей } </style></head><; body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const Canvas = document.getElementById(canvas); const ctx = Canvas.getContext(2d); ctx.beginPath(); ctx.strokeStyle = #aaaaaa; ctx.arc(100, 100, 50, 0, 2 * Math.stroke(); closePath() };</script></body></html>Окончательные результаты отображаются следующим образом:
Видно, что размер холста действительно 200*200. Но круг превратился в эллипс, а форма деформировалась. Почему это?
Что произойдет, если размер, установленный CSS, будет удален?
Видно, что график в это время нормальный. Размер холста действительно по умолчанию 300*150.
Из сравнения и воображения можно сделать следующие выводы:
Изначально мы рисовали круг на холсте 300150. После завершения рисования мы хотим изменить размер холста на 200200. При этом холст остается тем же холстом и не будет изменен.
Что работает, так это растянуть холст. Если предположить, что полотно обладает эластичностью, то полотно растянется от 300150 до 200200. Большая полуось круга на холсте становится в 1,33 раза больше исходного размера, а малая полуось — в 0,68 раза. В этот момент круг, естественно, представляет собой эллипс.
в заключение:При использовании холста для рисования, чтобы избежать ненужных проблем, вы должны не забыть установить ширину и высоту размера HTML для элемента холста.
Подвести итогВыше представлен краткий анализ влияния размера HTML и CSS элемента Canvas на визуальный элемент, введенный редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение. Редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!