                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

ctx代表整个画布，那ctx.rotate(rot / 180 * Math.PI)是旋转画布而不是单个五角星吗？

            ctx.translate(xw, yw);
            ctx.rotate(rot / 180 * Math.PI);
            ctx.scale(R,R);

starPath(ctx);

五角星的绘制语句写在了后面，那rotate 这个方法是在旋转画布？

通过相对位置让小星星看起来是自己转动了吗？

Qzhor

2016-08-25

源自：Canvas绘图详解 4-3

关注问题我要回答

3290

操作

收起

4 回答

Icekiller 回答被采纳 +3 积分
2016-08-26

rotate的旋转是你当前画布里面的元素，绘制五角星，使用for循环画出多个五角星，每次循环都使用了beginPath();

0 回复有任何疑惑可以回复我~

收起回答

Qzhor 提问者

非常感谢！

2016-08-26 回复有任何疑惑可以回复我~

E网飙风
2017-10-26

45 * Math.PI/180,为什么是 180，而不是360？

0 回复有任何疑惑可以回复我~

收起回答

Qzhor 提问者
2016-08-26

canvas的转换不是针对整个canvas的，而是针对调用转换方法之后绘制的shapes 或 paths。如下：

context.rotate(45 * Math.PI/180);

context.fillRect(50, 50, 50, 50);

顺序很重要，反了就没有旋转的效果了。

此贴终结。

0 回复有任何疑惑可以回复我~

收起回答

Qzhor 提问者
2016-08-26

我回过来想一想，canvas的旋转是先把画布转好了，然后在旋转过的画布上画星星，而不是把星星画出来再动态旋转。

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

Canvas绘图详解

参与学习 72873 人
解答问题 422 个

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

进入课程

本课相似问答

6 回答做了一个五角星组合旋转的动画效果：）

3 回答画五角星的问题

3 回答为什么我加了旋转五角星就跑到黑布外面去了呢？

1 回答画布会缓存吗？是否只有clearRect能清除画布？

1 回答为什么我用window.onload的时候画不出来五角星

搜索更多本课相关问答

ctx代表整个画布，那ctx.rotate(rot / 180 * Math.PI)是旋转画布而不是单个五角星吗？

我要回答关注问题

热搜

最近搜索清空

ctx代表整个画布，那ctx.rotate(rot / 180 * Math.PI)是旋转画布而不是单个五角星吗？

4 回答

本课相似问答

ctx代表整个画布，那ctx.rotate(rot / 180 * Math.PI)是旋转画布而不是单个五角星吗？