87,910
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
z109876543210 2017-01-06
- 打赏
- 举报
太历害了
天际的海浪 2017-01-06
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
body {
background-color: #666;
}
canvas {
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvasId" width="300" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
var r = 3;
function rotate() {
var w = canvas.width, h = canvas.height;
ctx.clearRect(0,0,w,h);
ctx.save();
ctx.translate(w/2,h/2);
var ra = r*Math.PI/180;
var cr = Math.atan2(h,w);
var cd = Math.sqrt(w*w + h*h);
var x1 = Math.abs(Math.cos(cr+ra)*cd);
var x2 = Math.abs(Math.cos(cr-ra)*cd);
var s = Math.min(w/x1,w/x2);
ctx.scale(s,s);
ctx.rotate(ra);
ctx.fillRect(-w/2,-h/2,w,h);
ctx.restore();
r++;
}
setInterval(rotate, 50);
</script>
</body>
</html>
