canvas: 探究rotate()函数

在Nicholas的《JS》高级程序设计中是这样描述描述canvas的rotate()API的。

rotate(angle):围绕原点旋转图像angle弧度

首先注意angle参数的单位是弧度

我刚看到这个API的描述时认为:这是要把画布上已经画好的内容,旋转angle弧度吗,实则不然。首先让我们看下面这段代码

 <canvas id="drawing" width="200px" height="200px"></canvas>
script type="text/javascript">
    var drawing=document.getElementById("drawing");
    if(drawing.getContext){
        var context=drawing.getContext("2d");
        context.beginPath();
        context.arc(100,100,
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]的代码是一个用JavaScript实现元素自动旋转的功能。这段代码定义了一个名为rotate函数,该函数通过每隔100毫秒调用fun函数来实现旋转效果。fun函数使用了getElementById方法获取id为"login"的元素,并通过改变其transform属性来实现旋转效果。具体的旋转角度由deg变量控制,每次fun函数被调用时,deg变量增加1度,然后将其拼接到transform属性。\[1\] 引用\[2\]的代码是一个用canvas绘制图形并实现旋转的示例。这段代码首先获取了id为"drawing"的canvas元素,并通过getContext方法获取了绘图上下文。然后使用绘图上下文的方法绘制了一个圆形,并通过translate和rotate方法实现了旋转效果。具体的旋转角度由rotate方法的参数控制。\[2\] 根据以上两段代码的描述,可以看出,rotate函数是用来实现元素自动旋转的功能,而canvasrotate方法是用来实现绘制图形的旋转效果。这两段代码rotate函数rotate方法虽然名称相同,但功能和使用方式是不同的。 #### 引用[.reference_title] - *1* [用JavaScript实现元素自动旋转功能](https://blog.csdn.net/qq_49249150/article/details/108060805)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [canvas: 探究rotate()函数](https://blog.csdn.net/huangpin815/article/details/69487052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值