Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h2>Otočení obdélníku</h2> <canvas width="600" height="300" id="playground"></canvas> <br> <label for="rot">Otočení obdélníku: <span id="valuerot">0°</span></label> <input type="range" min="0" max="360" step="5" value="0" id="rot">
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#playground { border: 1px solid #000; background-color: #d0d0d0; }
CSS
Autoformát
CSS reset
Až na konci
function $(selector, el) { if (!el) el = document; var elements = el.querySelectorAll(selector); return elements; } var keys = { A : 65, B : 66, C : 67, D : 68, E : 69, F : 70, G : 71, H : 72, I : 73, J : 74, K : 75, L : 76, M : 77, N : 78, O : 79, P : 80, Q : 81, R : 82, S : 83, T : 84, U : 85, V : 86, W : 87, X : 88, Y : 89, Z : 90, UP : 38, RIGHT : 39, DOWN : 40, LEFT : 37 } var playgnd = $("#playground")[0]; var pctx = playgnd.getContext("2d"); function drawRotatedRect(x, y, w, h, r) { pctx.clearRect(0, 0, playgnd.offsetWidth, playgnd.offsetHeight); var points = []; points[0] = {x : x, y : y}; points[1] = {x : x + Math.cos(r / 180 * Math.PI) * w, y : y + Math.sin(r / 180 * Math.PI) * h}; points[2] = {x : x + Math.cos((r + 90) / 180 * Math.PI) * /*w*/h, y : y + Math.sin((r + 90) / 180 * Math.PI) * /*h*/w}; points[3] = {x : points[2].x + Math.cos(r / 180 * Math.PI) * w, y : points[2].y + Math.sin(r / 180 * Math.PI) * h}; pctx.beginPath(); pctx.moveTo(points[0].x, points[0].y); pctx.lineTo(points[1].x, points[1].y); pctx.lineTo(points[3].x, points[3].y); pctx.lineTo(points[2].x, points[2].y); pctx.lineTo(points[0].x, points[0].y); pctx.fillStyle = "lightblue"; pctx.fill(); pctx.stroke(); pctx.closePath(); } $("input[type=range]")[0].onchange = function() { drawRotatedRect(300, 150, 200, 100, Number($("input[type=range]")[0].value)); $("#valuerot")[0].innerHTML = $("input[type=range]")[0].value + "°"; } drawRotatedRect(300, 150, 200, 100, 0);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>