[已解决]关于canvas旋转的问题

lhj390 · 发表于 2018-4-18 16:03:16

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

连续旋转的时候有270度是黑的，像这样：
无标题.png

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转动画</title>
<script src="js/rotate.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
background: #000;
}
#c1{
background: #fff;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400">
<span style="color: red;">浏览器不支持canvas</span>
</canvas>
</body>
</html>

复制代码

js代码

window.onload=function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
oGC.translate(200,200);
setInterval(function(){
num++;
oGC.save();
oGC.clearRect(0,0,oC.width,oC.height);
oGC.rotate(num*Math.PI/180);
oGC.fillRect(0,0,100,100);
oGC.restore();
},10);
}

复制代码

不知道哪里有问题

最佳答案

月排行榜 / 总排行榜

不二如是

2018-4-19 11:05:53

本帖最后由不二如是于 2018-4-19 11:36 编辑

目前鱼油的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转动画</title>
<style type="text/css">
body{
background: #000;
}
#c1{
background: #fff;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400">
<span style="color: red;">浏览器不支持canvas</span>
</canvas>
<script>
window.onload=function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
// 转换画布的用户坐标系统。水平和垂直进行偏移
oGC.translate(200,200);
setInterval(function(){
num++;
oGC.save();
// 删除一个画布的矩形区域400*400
oGC.clearRect(0,0,oC.width,oC.height);
// 旋转
oGC.rotate(num*(Math.PI/180));
// 填充一个矩形
// fillRect(x, y, width, height)
// x, y 矩形的左上角的坐标。
// width, height 矩形的大小。
oGC.fillRect(0,0,100,100);
oGC.restore();
},10);
}
</script>
</body>
</html>

复制代码

利用矩形的对角线宽度，围绕圆心进行画圆。

这个画圆，是靠“挖空”画布白色，呈现body黑色实现的。

所以要动态清除画布的白色，也就是通过矩形对角线轨迹，完成背景色黑的的呈现。

第一遍save，啥也木有，后面的clearRect也啥也木有

然后rotate为空，fillRect执行，挖出一个100*100的黑色矩形。

进入定时器第二遍，该矩形会被清除，然后就这么画矩形，旋转，清除，restore。。。

关键就在清除的中心和restore（）之间的顺序。

如果只想画出一个整圆，可以直接注释掉清除画布（修改中心和半径也行）：

// oGC.clearRect(0,0,oC.width,oC.height);

复制代码

跳转到最佳答案楼层

lhj390 · 发表于 2018-4-18 19:16:30

把 oGC.clearRect(0,0,oC.width,oC.height);改为 oGC.clearRect(-200,-200,oC.width,oC.height);

不二如是 · 发表于 2018-4-19 11:05:53

本帖最后由不二如是于 2018-4-19 11:36 编辑

目前鱼油的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转动画</title>
<style type="text/css">
body{
background: #000;
}
#c1{
background: #fff;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400">
<span style="color: red;">浏览器不支持canvas</span>
</canvas>
<script>
window.onload=function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
// 转换画布的用户坐标系统。水平和垂直进行偏移
oGC.translate(200,200);
setInterval(function(){
num++;
oGC.save();
// 删除一个画布的矩形区域400*400
oGC.clearRect(0,0,oC.width,oC.height);
// 旋转
oGC.rotate(num*(Math.PI/180));
// 填充一个矩形
// fillRect(x, y, width, height)
// x, y 矩形的左上角的坐标。
// width, height 矩形的大小。
oGC.fillRect(0,0,100,100);
oGC.restore();
},10);
}
</script>
</body>
</html>

复制代码

利用矩形的对角线宽度，围绕圆心进行画圆。

这个画圆，是靠“挖空”画布白色，呈现body黑色实现的。

所以要动态清除画布的白色，也就是通过矩形对角线轨迹，完成背景色黑的的呈现。

第一遍save，啥也木有，后面的clearRect也啥也木有

然后rotate为空，fillRect执行，挖出一个100*100的黑色矩形。

进入定时器第二遍，该矩形会被清除，然后就这么画矩形，旋转，清除，restore。。。

关键就在清除的中心和restore（）之间的顺序。

如果只想画出一个整圆，可以直接注释掉清除画布（修改中心和半径也行）：

// oGC.clearRect(0,0,oC.width,oC.height);

复制代码

账号		自动登录	找回密码
密码			立即注册