1.less
* {
margin: 0;
padding: 0;
#wrap {
width: 600px;
height: 800px;
background: tomato;
border: 2px solid white;
border-radius: 5%;
//这里不可使用position，会影响画布的坐标定位
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 5% auto;
font: 20px "微软雅黑";
text-align: center;
color: white;
transition: 2s;
&:hover {
background: steelblue;
}
h1 {
margin-top: 8%;
}
h2 {
margin-left: 30%;
margin-top: 100%;
}
#wrap-canvas {
position: absolute;
background: skyblue;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
}2.css
* {
margin: 0;
padding: 0;
}
* #wrap {
width: 600px;
height: 800px;
background: tomato;
border: 2px solid white;
border-radius: 5%;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 5% auto;
font: 20px "微软雅黑";
text-align: center;
color: white;
transition: 2s;
}
* #wrap:hover {
background: steelblue;
}
* #wrap h1 {
margin-top: 8%;
}
* #wrap h2 {
margin-left: 30%;
margin-top: 100%;
}
* #wrap #wrap-canvas {
position: absolute;
background: skyblue;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}3.js
$(function() {
var canvasNode = document.querySelector("#wrap-canvas");
if(canvasNode.getContext) {
var canvasPen = canvasNode.getContext("2d");
//旋转flag
var rotateFlag = 0;
//缩放限制flag
var scaleFlag = 0;
//缩放因子flag
var scaleFactor = 0;
//居中原理解析：在interval中直接创建即可
//canvasPen.save();
//canvasPen.translate(250, 250);
//canvasPen.beginPath();
/*更改中心点后，需要在这里采取-left减去
* （回到初始化点-250，-250）=（0,0）
* 到达中心点-250+200=-50
*/
//canvasPen.fillRect(-50, -50, 100, 100);
//canvasPen.restore();
setInterval(function() {
//1.无限循环flag++
rotateFlag++;
//2.消除外面的rect，生成新的rect矩形替换:清理rect的位置及宽高，防止重叠样式生效。
canvasPen.clearRect(0, 0, canvasNode.width, canvasNode.height);
canvasPen.save();
canvasPen.fillStyle = "tomato";
canvasPen.translate(250, 250);
//3. canvasPen.rotate(45*Math.PI/180);形成旋转后再填充，如果在fillRect之后，则会将之前的源点未旋转的rect保留
canvasPen.rotate(rotateFlag * Math.PI / 180);
/*
* 缩放:factor因子=100，
* flag开始-1，99-1=98，直到factor=0
* flag开始+1，factor+=1，循环
*/
if(scaleFactor == 100) {
scaleFlag = -1;
} else if(scaleFactor == 0) {
scaleFlag = 1;
}
scaleFactor += scaleFlag;
/*
* factor=1-100
* scale=(1-100)50=1/50 0.02 - 100/50 2
*/
canvasPen.scale(scaleFactor / 50, scaleFactor / 50);
console.log("缩放因子变换：", scaleFactor);
canvasPen.beginPath();
canvasPen.fillRect(-50, -50, 100, 100);
canvasPen.restore();
}, 500 / 60)
}
})
4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scal=1.0,user-scale=no" />
<title>canvas画布-缩放-旋转box动画</title>
</head>
<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/11-canvas-box-ex.css" />
<body>
<div id="wrap">
<h1>canvas-box旋转scale动画</h1>
<canvas id="wrap-canvas" width="500px" height="500px">
</canvas>
<h2>PS：一刀coder</h2>
</div>
</body>
<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/11-canvas-box-ex.js"></script>
</html>
1234567891011121314151617181920212223245.效果图
canvas