【笔记|利用canvas画布和rotate()方法让画的图形旋转起来】上一篇讲了利用canvas画布画太极图，这一篇说的是让太极图旋转起来。
**思路：**利用HTML DOM 的setInterval()方法，它会按照指定的周期来调用函数或计算表达式。再利用画布的rotate()方法，该方法的参数angle表示旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。如果没有angle+=0.02，太极图只旋转一次。
源码：
canvas-learning
>
var cav=document.getElementById("myCanvas")
var cxt=cav.getContext("2d") var angle=0
setInterval(function(){
// 保存当前环境的状态
cxt.save()// 重新映射画布上的 (0,0) 位置
cxt.translate(300,300) // 旋转当前绘图
cxt.rotate(angle) cxt.beginPath()
cxt.fillStyle="#fff"
cxt.arc(0,0,200,0,2*Math.PI,false)
cxt.fill()
cxt.closePath() cxt.beginPath()
cxt.arc(0,0,200,0.5*Math.PI,1.5*Math.PI,false)
cxt.fillStyle="#000"
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#fff"
cxt.arc(0,-100,100,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#000"
cxt.arc(0,100,100,0,2*Math.PI,false)
cxt.fill()
cxt.closePath() cxt.beginPath()
cxt.fillStyle="#000"
cxt.arc(0,-100,15,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#fff"
cxt.arc(0,100,15,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
// 返回之前保存过的路径状态和属性
cxt.restore()
// 逆时针旋转
angle-=0.02
// 顺时针
// angle+=0.02
},15)
推荐阅读
- 笔记|利用CSS实现任意形状的文字环绕
- 笔记|hadoop核心组件——HDFS系列讲解之HDFS其他功能介绍
- 笔记|hadoop核心组件——HDFS系列讲解之HDFS基本介绍
- 笔记|hadoop核心组件——HDFS系列讲解之HDFS的高级使用命令
- MySQL|MySQL备份与恢复+策略方案选择
- 笔记|《模式识别》学习笔记（四）
- 初学萌新|《机器学习方法（第三版）——李航》学习笔记（一）
- python|Numpy - 1.22.1 详细笔记
- 笔记|CSS设置背景颜色透明