Question

我只是尝试HTML5最受欢迎的功能，即画布。有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);，然后使用新的更改属性再次绘制矩形。

整个画布正在旋转？

2 个答案: