<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background: #000000;
}
#c1 {
background: #ffffff;
transition: translate 0.5s;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
<script>
var oC = document.getElementById("c1");
var cvsCtx = oC.getContext("2d");
var num = 0;
cvsCtx.translate(100, 100);
var num2 =0
var value =1;
setInterval(() => {
cvsCtx.save();
cvsCtx.clearRect(-100, -100, oC.width, oC.height);
num++
num2+=value;
if(num2==100){
value =-1
}else if(num2==0){
value=1
}
cvsCtx.rotate((num * Math.PI) / 180);
cvsCtx.scale(num2*1/50,num2*1/50)
cvsCtx.translate(-50, -50);
cvsCtx.fillRect(0, 0, 100, 100);
cvsCtx.restore();
}, 50);
</script>
</html>
canvas----放大缩小,旋转
猜你喜欢
转载自blog.csdn.net/weixin_41069726/article/details/89431002
今日推荐
周排行