首页 > 代码库 > canvas and css3分别实现旋转效果
canvas and css3分别实现旋转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap,canvas{
width: 200px;
position: relative;
height: 200px;
background: #f5f5f5;
margin: 20px auto;
display: block;
}
.rotate{
position: absolute;
top: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
left: 50%;
margin-left: -50px;
background: red;
animation: rotate 1s infinite linear;
transition: transform .5s;
}
p{
margin-top: 20px;
text-align: center;
}
@-webkit-keyframes rotate{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<p>CSS旋转</p>
<div class="wrap">
<div class="rotate"></div>
</div>
<p>canvas旋转</p>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
// 取得canvas元素 ， canvas标签上的 width="200" height="200" 不能去，否则会被拉伸图形
var canvas = document.getElementById("canvas");
// 获取canvas绘制图形的上下文对象
var ctx = canvas.getContext("2d");
// 保存坐标点x、y，分别为canvas宽度高度的一般
var x = canvas.width / 2;
var y = canvas.height / 2;
// 定义一个方法，用于绘制矩形
function draw(ag){
// 保存当前画图状态
ctx.save();
// 将传进来的角度转换成canvas所识别的弧度
deg = ag * Math.PI / 180;
// 清楚画图
ctx.clearRect( 0 , 0 , x * 2 , y * 2);
// 重置画图其实坐标点
ctx.translate( x , y );
// 旋转画布
ctx.rotate( deg );
// 设置填充色
ctx.fillStyle="red";
// 恢复画布坐标点到一半位置
ctx.translate( -x / 2 , -y / 2 );
// 绘制矩形
ctx.fillRect( 0 , 0 , 100 , 100 );
// 返回之前保存过的画布状态
ctx.restore()
}
// 初始角度
var ag = 0;
// 启动一个计时器
var timer = setInterval(function(){
// 角度进行自增
ag++;
// 判断角度，如果大于360度则归0
ag = ag > 360 ? 0 : ag;
// 调用绘制函数，进行图形绘制
draw(ag);
// 1000 / 360 是1秒旋转360次，即1秒转完一圈
} , 1000/360);
</script>
</body>
</html>
OK 代码是我朋友的源码 我刚开始学canvas 入门多算不上 大家轻踩我 有H5大神（偏游戏动画方向的指导一下 谢谢）。
canvas and css3分别实现旋转效果