rotate a rectangle - Javascript Canvas

Javascript examples for Canvas:Rectangle

  1. HOME
  2. Javascript
  3. Canvas
  4. Rectangle

Description

rotate a rectangle

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  w  w w  .jav  a 2 s.c o  m
var c = document.getElementById("canv");
var canvas = c.getContext("2d");
//ciarka
function _rotate() {
    canvas.clearRect(0, 0, 600, 400);
    stvorec(Math.random() * 360);
}
function stvorec(param) {
    canvas.save();
    canvas.beginPath();
    canvas.translate(350, 50);
    canvas.rotate(param * Math.PI / 180);
    canvas.fillStyle = "green";
    canvas.fillRect(-25, -25, 50, 50);
    canvas.restore();
}
function ciarka() {
    canvas.beginPath();
    canvas.moveTo(10, 10);
    canvas.lineTo(50, 30);
    canvas.lineTo(100, 10);
    canvas.lineTo(150, 30);
    canvas.lineTo(200, 10);
    canvas.lineTo(250, 30);
    canvas.lineTo(300, 10);
    canvas.lineTo(350, 30);
    canvas.lineTo(400, 10);
    canvas.lineTo(450, 30);
    canvas.lineTo(500, 10);
    canvas.lineTo(550, 30);
    canvas.lineTo(590, 10);
    canvas.stroke();
}
//obdlznik
function obdlznik() {
    canvas.beginPath();
    canvas.rect(150, 150, 100, 50);
    canvas.strokeStyle = "black";
    canvas.stroke();
}
//kruh
function kruh() {
    canvas.beginPath();
    canvas.arc(200, 80, 50, 0, 2.0 * Math.PI);
    canvas.closePath();
    canvas.stroke();
}

stvorec();
ciarka();
kruh();
obdlznik();
$("#test").click(function () {
    _rotate();
});
    });

      </script> 
   </head> 
   <body> 
      <button id="test">Test</button>
      <br> 
      <canvas id="canv" width="600" height="400"></canvas>  
   </body>
</html>

Related Tutorials