TAG
CSS
JavaScript
Result
Run
License
<h3>Please change the rotate value</h3> <fieldset> <legend>Angle: <span></span>px</legend> <input type="range" id="angle" min="-90" max="90" value="0" /> </fieldset> <br /> <canvas id="mycanvas" width="200" height="200"></canvas>
canvas { border: 1px solid #CCC; display: block; margin-top: 10px; }
window.addEventListener("load", function() { const elAngle = document.getElementById("angle"); const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); elAngle.addEventListener("input", function(e) { let angle = e.currentTarget.value; e.currentTarget.previousElementSibling.children[0].textContent = angle; context.beginPath(); context.clearRect(0, 0, elCanvas.width, elCanvas.height); context.resetTransform(); context.beginPath(); context.rotate(angle * (Math.PI / 180)); context.rect(50, 50, 100, 100); context.stroke(); }); elAngle.dispatchEvent(new Event("input")); });
Console
expand_less
License
License
by DevDic
Close