HTML5使用jquery旋转元素

我正在开发一个模拟牌堆洗牌的网络游戏，我想用画布来表示一张牌。我想知道是否有一种方法可以使用jquery或其他库来旋转元素，从而使元素不再与X-Y对齐。我知道我可以旋转画布坐标系，但我需要使画布比卡片大才能渲染旋转的卡片。有没有直接旋转图元的方法？多谢各位

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

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

你要做的是：

• 抽牌
• 稍等片刻
• 清理画布
• 用稍微新的轮换重新绘制您的卡
• 重复，重复，重复

您可以使用html5的requestAnimationFrame（RAF）进行等待。RAF将在大约16毫秒后执行一项功能。它就像一个循环，您可以将代码放入其中，它通常如下所示：

function animate(){

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

    // draw a current animation on the canvas

}

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();

要有效地旋转卡，请执行以下操作：

• 保存画布上下文的未旋转状态（context.save）
• 移动到卡位置的中心（context.translate）
• 稍微旋转画布（context.rotate）
• （它将围绕卡的中心点旋转，因为您已“转换”到中心点）
• 绘制卡片（context.drawImage）
• 将画布上下文还原为其未旋转状态

看起来是这样的：

function animate(){

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

    // draw a current animation on the canvas

}

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();

下面是示例代码和提琴：

正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var旋转=0；
var img=新图像（）；
img.onload=函数（）{
制作动画（）；
}
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/card.png";
函数animate（）{
请求动画帧（动画）；
//绘图代码在这里
旋转+=Math.PI/120；
clearRect（0,0，canvas.width，canvas.height）；
ctx.save（）；
ctx.translate（100100）；
ctx.旋转（旋转）；
ctx.图纸图像（img，-img.宽度/2，-img.高度/2）；
ctx.restore（）；
}
}); // end$（函数（）{}）；

css transform rotate将旋转画布中的元素，您可以使用context.rotate