Zaokrąglanie rogów prostokąta (HTML5 canvas)

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 (x₀,y₀)
• punkt końcowy łuku(x₁,y₁)
• r – promień łuku

Szczegółowe wytłumaczenie znajduje się tutaj

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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();