jqueryrotate：可以改变旋转点吗？（变换画布函数）

发布于 2024-10-17 07:06:06 字数 480 浏览 2 评论 0原文

我正在尝试通过使用 jquery roate 插件旋转图像来制作动画。不幸的是，这个插件不会改变它的旋转点，它总是居中的。并且它没有为此的参数

我发现使用画布执行此操作我可以使用 canvas.transform() 函数设置它。

我是使用画布的初学者，但如果有人能给我一个如何做到这一点的例子，我将非常感激。

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

这里是用画布制作的..（但有点糟糕，因为它留下了痕迹。不知道为什么 http://jsbin.com/ipeqi3/2）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独夜无伴 2024-10-24 07:06:06

这就是我到目前为止所拥有的，实际上它通过平移改变旋转点来旋转图像（不是变换，我的错......）

它不做的事情它不会创建平滑的动画，它非常粗糙。 .我怎样才能做到这一点？

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

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

<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>

This is what I have so far, indeed it rotates the image by changing the point of rotation with translate (not transform, my bad...)

What It DOESN'T do it doesn't create a smooth animation, it's very rough..How can I accomplish that?

Another thing I need is that the background HAS to be transparent

here's my code so far:

<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>

回复收藏 0 原文

~没有更多了~