js with the spikey wheel

canvas rotation test integrating JS

by rob Davis

HTML

<body>
    <canvas id="myCanvas" width="500" height="500"></canvas> <span></span>

</body>

CSS

body {
          margin: 0px;
          padding: 0px;
          background-color:white;
      }
canvas { border: 1px solid black; }

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;

drawBall(25, 0);

$('canvas').mousemove(function (event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    var perctX = (event.clientX / width) * 100;
    var step=360*(perctX/100);
    var perctY = (event.clientY / height) * 100;
    var angle = 360*(perctY/100);
    $('span').html(pageCoords + ' ' + clientCoords + ' ' + perctX + '% ' + perctY+'%');
    drawBall(step, angle);
});

function drawBall(step, angle) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(width / 2, height / 2);
    context.rotate(deg2Rad(angle));
    for (var i = 0; i <= 360 - step; i += step) {
        drawSpike(i);
    }
    context.restore();
}

function drawSpike(angle) {
    context.save();
    context.rotate(deg2Rad(angle));
    context.beginPath();
    context.moveTo(-10, 0);
    context.lineTo(10, 0);
    context.lineTo(0, -80);
    context.fillStyle = 'red';
    context.closePath();
    context.fill();
    context.strokeStyle = 'black';
    context.stroke();
    context.restore();
}

function deg2Rad(deg) {
    return deg * Math.PI / 180;
}