Etichete: canvas, clearRect, strokeRect, fillRect
În acest articol, ne vom familiariza cu funcțiile interne care vă permit să desenați dreptunghiuri în pânză.
Spre deosebire de SVG. panza acceptă numai forme primitive, de exemplu, dreptunghiuri. Toate celelalte forme pot fi create utilizând diferite combinații de dreptunghiuri și linii. Trei funcții sunt folosite pentru a desena dreptunghiuri, care vor fi discutate mai târziu.
Pentru toate exemplele, se utilizează următoarea structură de fișier HTML:
Canvas - fillRect (x, y, lățime, înălțime)
Desenează un dreptunghi plin. x și y sunt coordonatele colțului din stânga sus, iar lățimea și înălțimea sunt lățimea și înălțimea dreptunghiului. Luați în considerare un exemplu simplu:
Rezultat pe pagina demo:
Canvas-strokeRect (x, y, lățime, înălțime)
Desenează un dreptunghi gol (numai frontierele). x și y sunt coordonatele colțului din stânga sus, iar lățimea și înălțimea sunt lățimea și înălțimea dreptunghiului. Luați în considerare un exemplu simplu:
Rezultat pe pagina demo:
Canvas - clearRect (x, y, lățime, înălțime)
Șterge zona dreptunghiulară selectată pe culoarea de fundal. x și y sunt coordonatele colțului din stânga sus, iar lățimea și înălțimea sunt lățimea și înălțimea dreptunghiului. Luați în considerare un exemplu simplu:
În acest exemplu, mai întâi tragem un dreptunghi plin pentru a vedea efectul funcției clearRect.
Rezultat pe pagina demo: