html js设置旋转动画效果图,JavaScript图片旋转效果实现方法详解

在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：

void rotate(in float angle); // 按给定的弧度顺时针旋转angle

rotate()方法旋转的中心始终是canvas的原点。如果要改变旋转中心，需要使用translate方法。

我们可以将绘制的图形每隔一定的时间间隔后，旋转一定的角度重新绘制一次，这样就可以得到旋转的动画效果。

1．旋转的扇叶

将一个梯形按顺时针旋转90°的方式绘制4次，可以绘制出一个扇叶图案。将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的扇叶动画。

编写如下的HTML代码。

旋转的扇叶

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(

id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

i = 3;

setInterval(move, 100);

}

function move()

{

context.clearRect(0, 0, 400, 300);

context.save();

context.fillStyle = 'green';

context.translate(100, 100);

context.rotate(i * Math.PI / 45)

drawLeaf();

i += 3;

if (i >= 90) i = 3;

context.restore();

}

function drawLeaf() // 绘制扇叶

{

context.save();

for (var j = 0; j < 4; j++)

{

context.rotate(Math.PI / 2);

context.beginPath();

context.moveTo(-20, -80);

context.lineTo(0, -80);

context.lineTo(0, 0);

context.lineTo(-30, 0);

context.closePath();

context.fill();

}

context.restore();

}

style="border:3px double #996633;">