Весь холст вращается?

Question

Я просто пробую свои силы в наиболее обсуждаемой функции HTML5, т.е. в canvas. Есть 2 прямоугольника, и я только хочу повернуть 1-й и оставить 2-й как есть. Проблема в том, что при выполнении приведенного ниже кода мой холст поворачивается и оба прямоугольника поворачиваются. Я даже не могу найти API, где я могу получить ссылку на нарисованный мной объект и вращать только этот конкретный объект вместо всего контекста.

Код:

<script type="text/javascript">
    var context;
    var radian = 0.01;
    var w, h;
    $(document).ready(function () {
        w = document.width;
        h = document.height;
        var canvas = $('#canvas');
        context = canvas[0].getContext('2d');
        canvas[0].width = w;
        canvas[0].height = h;
        setInterval(startAnim, 200);
    });

    function startAnim() {
        context.clearRect(0, 0, w, h);
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(0, 0, w, h);
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(255,255,0)';
        context.rotate(radian);
        context.strokeRect(400, 300, 200, 200);
        context.fillRect(400, 300, 200, 200);
        context.fillStyle = 'rgb(0,255,255)';
        context.fillRect(500, 400, 200, 200);
        radian += 0.01;
    }
</script>

Как я могу предотвратить это?

Answer 1

Наконец, я решил проблему самостоятельно методом проб и ошибок.Это код:

<script type="text/javascript">
    var context;
    var radian = 0.01;
    var w, h;
    $(document).ready(function () {
        w = document.width;
        h = document.height;
        var canvas = $('#canvas');
        context = canvas[0].getContext('2d');
        canvas[0].width = w;
        canvas[0].height = h;
        setInterval(startAnim, 100);
    });

    function startAnim() {

        context.save();
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(0, 0, w, h);
        context.rotate(radian);
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(255,255,0)';
        context.strokeRect(400, 300, 200, 200);
        context.fillRect(400, 300, 200, 200);
        context.restore();

        context.fillStyle = 'rgb(0,255,255)';
        context.fillRect(500, 400, 200, 200);

        radian += 0.1;
    }
</script>

Answer 2

Как я понимаю, вы должны очистить весь холст и перерисовать все между каждым кадром. Храните данные для прямоугольников в памяти. Сделайте context.clearRect(0, 0, w, h); между каждым кадром, затем снова нарисуйте прямоугольники с новыми измененными свойствами.