Context.moveTo(cx,cy); //Начало рисования

var x2 = cx, y2 = cy;

for (var i = 0; i <= iterations; i++)

{

var angle = i / 10; // угол в радианах

var radius = angle * 2; //радиус в пикселях

var x = cx + radius * Math.cos(angle);

var y = cy + radius * Math.sin(angle);

context.beginPath();

var val = Math.floor(radius * 3);

// Затухание спирали

if (val > 255) val = 255;

context.strokeStyle='rgb(' + val + ',' + val + ',' + (255) + ')';

// Отрисовка звена

context.moveTo(x2, y2);

context.lineTo(x, y);

context.stroke();

x2 = x;

y2 = y;

}

}

//Можно просто поворачивать картинку (например, с помощью трансформаций CSS).

//Можно перерисовывать спираль, добавляя сдвиг угла поворота.

//Можно перерисовывать спираль как есть. Но виртуально поворачивать систему координат.

//Последнее мы и будем делать

// Контекст для работы

var ctx = document.getElementById("myCanvas").getContext("2d");

// Ширина и высота холста

var width = ctx.canvas.width;

var height = ctx.canvas.height;

// Стиль линии

ctx.lineCap = 'round';

ctx.lineWidth = 8;

// Переносим начало координат в центр

ctx.translate(width / 2, height / 2);

// Ставим таймер

setInterval(function () {

// Очищаем экран

ctx.clearRect(-width / 2, -height / 2, width, height);

// Поворачиваем систему координат

ctx.rotate(-Math.PI / 180 );

// Рисуем спираль

drawSpiral(ctx);

}, 17);

</script>

</body>

</html>

В этом примере надо обратить внимание на следующие моменты:

1. Вместо того, чтобы поворачивать непосредственно спираль, мы виртуально поворачивали контекст отрисовки. Такой прием позволяет описать отрисовку спирали в удобных локальных координатах (заметили, что мы ее рисовали относительно центра cx = cy = 0?), а трансформацию вынесли на внешний уровень. Также с помощью метода translate мы сместили начало координат в центр экрана.
2. Canvas — примитивен. Canvas растровый и помнит только свое последнее состояние в виде массива пикселей. Мы не можем получить доступ к нарисованным линиям как отдельным объектам, которые можно было бы повернуть. Мы видим только последний слепок и чтобы нарисовать что-то новое (обновление экрана), надо делать перерисовку (через очистку экрана или поверх).