Innehållsförteckning
Att rita kurvor på en duk kan vara enkelt eller komplext, allt beror på vad du vill uppnå, du kan göra några intressanta effekter som vi kan använda för att bygga några funktioner på vår sida, som sticker ut från resten av sidorna som gjorts i HTML5.En av de saker vi kan göra är att ge en avancerad hantering av skapandet av krökta linjer, med den här typen av verktyg kommer vi närmare att inte ha begränsningar när vi tänker på vad vår sida kan göra.
Rita en kurva när du flyttar musen
Det här fallet är ganska intressant eftersom det vi gör är att rita en kurva när du flyttar musen, dessutom om vi trycker på någon tangent på vårt tangentbord ändras några punkter i kurvan.
Till exempel, om vi trycker på ctrl -tangenten, den första punkten som representerar slutet av delväg, om vi trycker på skiftknappen flyttas den andra punkten, som är metodens två första argument arcTo () och slutligen, om vi inte trycker på någon tangent, flyttas den tredje punkten som representeras av metodens två sista argument.
Låt oss se nedan vilken kod vi uppnår dessa effekter med:
Exempel Din webbläsare stöder inte elementet duk Som vi kan se, först i koden definierar vi hanteraren för mottagning av händelser för tangenterna som vi trycker på, i den fastställer vi de värden som måste tas.
Låt oss se nedan en skärmdump av hur detta kan resultera i vår webbläsare, det är viktigt att nämna att resultaten är dynamiska när de återger detta exempel:
Tidigare hade vi bara använt metoden arcTo ()Nu ska vi se hur bågen () -metoden fungerar, dess hantering är lättare, eftersom vi anger en punkt på duken genom de två första argumenten och sedan kurvens radie och vinkel.
Låt oss se följande exempel på hur man ritar tre typer av kurvor med denna metod:
Exempel Din webbläsare stöder inte elementet duk Låt oss nu se hur det ser ut i vår webbläsare:
