版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shuiseyangguang/article/details/74936805
canvas实现图片旋转,用到的基本函数:
rotate()实现旋转;
scale(X,Y)实现缩放,X代表水平缩放,Y代表垂直缩放;
translate(X,Y)为画布的变换矩阵添加水平的和垂直的偏移;
基本思路:用rotate()方法实现图片旋转,用scale()实现缩放。rotate()旋转的时候是以左上角为顶点进行旋转,如果想以图片中心为定点旋转,用translate()将点定位到图片中心就好。
本例子以一个黑色矩形来模拟图片,实现类似的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{background: black;}
#myCanvas{background: white;}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
<script>
window.onload = function(){
var oC = document.getElementById("myCanvas");
var OGC = oC.getContext("2d");
//将方块起始点向左向下移动100单位
OGC.translate(100,100);
//OGC.rotate(45*Math.PI/180);
//旋转以顶点为中心点,旋转会累加
//等同于旋转45度
OGC.rotate(20*Math.PI/180);
OGC.rotate(25*Math.PI/180);
OGC.scale(2,2); //等比放大,宽放大2倍,高放大两倍
OGC.fillRect(0,0,100,100);
}
</script>
</html>
基本效果如果图示:方块等比放大2倍,并旋转45度;
接下来通过计时器,让这个方框动起来,在用计时器的时候每次开始要先保存绘制路径,并清除画布大小,结束的时候要用restore()方法清除本次的绘图,保持始终是一个方框在动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{background: black;}
#myCanvas{background: white;}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
<script>
window.onload = function(){
var oC = document.getElementById("myCanvas");
var OGC = oC.getContext("2d");
var num = 0;
var num2 = 0;
var value = 1;
setInterval(function(){
num++;
OGC.save();
OGC.clearRect(0,0,oC.width,oC.height);
OGC.translate(100,100);
//通过value改变num2值,控制是放大还是缩小
if (num2 == 100) {
value = -1;
} else if(num2 == 0){
value = 1;
}
num2+=value;
OGC.rotate(num*Math.PI/180);
//将旋转中心移到图片中心
OGC.translate(-50,-50);
OGC.fillRect(0,0,100,100);
OGC.restore();
},30);
}
</script>
</html>
效果图如下,gif看起来有些卡顿,实际运行很流畅,可以直接复制代码运行查看效果: