Este artículo presenta principalmente los ejemplos de rectángulos de dibujo en el lienzo HTML5. Este artículo utiliza tres API: Fillrect, Strokerect y ClearRect. Los amigos que lo necesitan pueden referirse a él.
Este artículo se traduce de Steve Fulton y Jeff Fulton HTML5 lienzo, Capítulo 2, la forma del rectángulo básico.
Echemos un vistazo a la forma geométrica simple integrada en lienzo: dibujar rectángulos. En el lienzo, hay tres formas de dibujar un rectángulo: relleno, trazo (Strokerect) y ClearRect. Por supuesto, también podemos usar caminos para representar todas las figuras, incluidos los rectángulos.
Estas son las API para los tres métodos anteriores:
1.Fréjate (x, y, ancho, altura). Dibuje un rectángulo sólido a partir de (x, y), ancho y altura.
2.Strokerect (x, y, ancho, altura). Dibuja una caja rectangular que comienza desde (x, y), ancho y altura. La caja rectangular se convertirá en diferentes estilos de acuerdo con el conjunto actual Strokestyle, LineWidth, LineJoin y Miterlimit.
3. Clarreco (x, y, ancho, altura). Limpie el área rectangular a partir de (x, y), ancho y altura, lo que lo hace completamente transparente.
Antes de llamar al método anterior para dibujar lienzo, necesitamos establecer el estilo de relleno y trazo. La forma más básica de establecer estos estilos es usar colores de 24 bits (denotado en cadenas hexadecimales). Aquí hay un ejemplo simple:
Copiar el código