Question

我正试图通过使用jquery roate插件旋转图像来进行动画。不幸的是，这个插件不会改变它的旋转点，它始终居中。它没有这个

的参数

我发现使用canvas执行此操作我可以使用canvas.transform（）函数进行设置。

我是一个使用画布工作的人，但是如果有人能给我一个例子来说明如何做到这一点我会非常感激它。

这是图片旋转插件：http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

这是用帆布做的..（但有点不好因为它留下了痕迹。不知道为什么http://jsbin.com/ipeqi3/2）

Answer 1

这是我到目前为止所用的，实际上它通过使用translate（不是变换，我的坏......）改变旋转点来旋转图像。

它没有做到这一点并没有创造出流畅的动画，它非常粗糙。我怎么能做到这一点？

我需要的另一件事是背景是透明的

到目前为止，这是我的代码：

<script>
var degree=10;

function docanvas() {
     var canvas = document.getElementById('canvas');
var cContext = canvas.getContext('2d');

 var img = new Image();   
  // Create new Image object     
  img.src = 'http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG'; // Set source path // set img src 


var cw = img.width, ch = img.height, cx = 0, cy = 0;


canvas.setAttribute('width', 300);
canvas.setAttribute('height', 300);

cContext.fillStyle = "rgba(0, 0, 255, .5)";
cContext.fillRect(0, 0, 300, 300);

cContext.translate(150, 150);


cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, -64, -128,128,128);

    degree+=5;

}
</script>


</head>
<body onload="setInterval('docanvas()',50);">
<canvas id="canvas"></canvas>
<script>
       docanvas(30);
</script>       
</body>
</html>

jquery旋转：改变旋转点可能吗？（转换画布功能）

1 个答案:

jquery旋转：改变旋转点可能吗？ （转换画布功能）

1 个答案:

jquery旋转：改变旋转点可能吗？（转换画布功能）