Funkcja zaokrąglająca rogi prostokąta (HTML5 canvas)

Zaokrąglanie rogów prostokąta – tworzenie funkcji

Tworzymy funkcje rysujące prostokąt z zaokrąglonymi rogami.

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");
	function roundRect(leftX, topY, width, height, cornerRadius) {
		ctx.moveTo(leftX + cornerRadius, topY);
		ctx.lineTo(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);
	};
	function strokeRoundRect(leftX, topY, width, height, cornerRadius,
			strokeStyle) {
		ctx.beginPath();
		roundRect(leftX, topY, width, height, cornerRadius);
		ctx.strokeStyle = strokeStyle;
		ctx.stroke();
	}
	function fillRoundRect(leftX, topY, width, height, cornerRadius,
			fillStyle) {
		ctx.beginPath();
		roundRect(leftX, topY, width, height, cornerRadius);
		ctx.fillStyle = fillStyle;
		ctx.fill();
	}
	strokeRoundRect(50, 50, 150, 100, 10, "black");
	fillRoundRect(50, 50, 150, 100, 10, "yellow");