Question

我正在开发一个模仿甲板洗牌的网页游戏，我想用画布代表卡片。我想知道是否有一种方法可以使用jquery或其他库旋转元素，以便元素不再是X-Y对齐的。我知道我可以旋转画布坐标系，但是我需要使画布比卡更大才能渲染旋转卡。有没有办法直接旋转元素？非常感谢你！

Answer 1

将卡片绘制到html画布后，您的卡片只是一幅画。

你无法重新定位它，因为它只是画布上的像素。

你做的是：

画卡
等一会儿
清除画布
使用新的轮播重新绘制卡片
重复，重复，重复！

您可以使用html5的requestAnimationFrame（RAF）来进行等待。 RAF将在大约16ms后执行一个功能。它就像一个循环，你可以把你的代码放入其中，它通常看起来像这样：

function animate(){

    requestAnimationFrame(animate);  // this will re-execute animate() in about 16ms

    // draw a current animation on the canvas

}

要有效地旋转卡片：

保存画布上下文的非旋转状态（context.save）
移动到卡片位置的中心（context.translate）
稍微旋转画布（context.rotate）
（因为你“翻译”到中心点，它会围绕你卡片的中心点旋转）
绘制卡片（context.drawImage）
将画布上下文恢复为未旋转状态。

看起来像这样：

ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(100,100);
ctx.rotate(rotation);
ctx.drawImage(img,-img.width/2,-img.height/2);
ctx.restore();

以下是示例代码和小提琴：http://jsfiddle.net/m1erickson/X9Wam/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

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

var rotation=0;

var img=new Image();
img.onload=function(){
    animate();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/card.png";

        function animate() {
                requestAnimationFrame(animate);

                // Drawing code goes here
                rotation+=Math.PI/120;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.save();
                ctx.translate(100,100);
                ctx.rotate(rotation);
                ctx.drawImage(img,-img.width/2,-img.height/2);
                ctx.restore();
        }


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

HTML5使用jquery旋转元素

1 个答案: