Zaokrąglanie rogów prostokąta
Prostokąt zaokrąglamy używając polecenia arcTo(x0,y0,x1,y1, r)
W poleceniu podajemy:
- punkt początkowy łuku (x0,y0)
- punkt końcowy łuku(x1,y1)
- r – promień łuku
Szczegółowe wytłumaczenie znajduje się tutaj
Listing
var cv = document.getElementById("canvas"); var ctx = cv.getContext("2d"); var leftX = 50; var topY = 50; var width = 150; var height = 100; var cornerRadius = 15; ctx.beginPath(); ctx.moveTo(leftX + cornerRadius, topY); ctx.lineTo(leftX+ width - cornerRadius, topY); ctx.arcTo(leftX + width, topY, leftX + width, topY + cornerRadius, cornerRadius); ctx.lineTo(leftX + width, topY + height - cornerRadius); ctx.arcTo(leftX + width, topY + height, leftX + width - cornerRadius, topY + height, cornerRadius); ctx.lineTo(leftX + cornerRadius, topY + height); ctx.arcTo(leftX, topY + height, leftX, topY + height - cornerRadius, cornerRadius); ctx.lineTo(leftX, topY + cornerRadius); ctx.arcTo(leftX, topY, leftX + cornerRadius, topY, cornerRadius); ctx.strokeStyle = "black"; ctx.stroke(); ctx.fillStyle = "yellow"; ctx.fill();