Problemas encontrados: html/11467.html">La razón por la que el elemento del lienzo está deformado y distorsionado
Hay tres tamaños para un elemento DOM: tamaño de estilo, tamaño de html y tamaño de css.
Cuando se utiliza el elemento de lienzo, el ancho y alto predeterminados del elemento de lienzo es 300 px * 150 px. El tamaño predeterminado aquí es el tamaño html.
Para ayudar a comprender mejor, tomemos la pintura como ejemplo. La mesa de trabajo tiene tamaño css o estilo, y el lienzo tiene tamaño html.
Si no mostramos el tamaño html del elemento de lienzo especificado, pero especificamos su tamaño css en el archivo css. El resultado es muy confuso.
Por ejemplo, dibujamos un círculo con un radio de 50 px en un lienzo predeterminado de 300 px * 150 px.
<html lang=zh><head> <meta charset=UTF-8> <title>tamaño del lienzo</title> <style> #canvas { ancho: 200px; alto: 200px } </style></head><; cuerpo><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById(canvas); const ctx = lienzo.getContext(2d); ctx.beginPath(); ctx.strokeStyle = #aaaaaa; ctx.arc(100, 100, 50, 0, 2 * Math.PI); closePath(); };</script></body></html>Los resultados finales mostrados son los siguientes:
Se puede ver que el tamaño del lienzo es efectivamente 200 * 200. Pero el círculo se ha convertido en una elipse y la forma se ha deformado. ¿Por qué es esto?
¿Qué pasa si se elimina el tamaño establecido por CSS?
Se puede observar que el gráfico es normal en este momento. De hecho, el tamaño del lienzo es el predeterminado 300*150.
De la comparación y la imaginación podemos sacar las siguientes conclusiones:
Inicialmente dibujamos un círculo en el lienzo de 300150. Una vez completado el dibujo, queremos cambiar el tamaño del lienzo a 200200. Al mismo tiempo, el lienzo sigue siendo el mismo y no cambiará.
Lo que funciona es estirar el lienzo. Suponiendo que el lienzo tiene elasticidad, entonces un lienzo se extiende de 300150 a 200200. El semieje mayor del círculo en el lienzo se vuelve 1,33 veces el tamaño original y el semieje menor se vuelve 0,68 veces. En este punto el círculo es naturalmente una elipse.
en conclusión:Cuando utilice lienzo para dibujar, para evitar problemas innecesarios, debe recordar establecer el ancho y alto del tamaño HTML para el elemento lienzo.
ResumirLo anterior es un breve análisis del impacto del tamaño html y css del elemento lienzo en el elemento visual introducido por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje. El editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!