利用canvas画布和rotate()方法让画的图形旋转起来

上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来。
**思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式。再利用画布的rotate()方法,该方法的参数angle表示旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。如果没有angle+=0.02,太极图只旋转一次。
源码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas-learningtitle>
head>
<body>
	<canvas id="myCanvas" width="600" height="600"
	style="background: yellow">canvas>
	<script>
	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)
	
	script>
body>
html>

你可能感兴趣的:(笔记,canvas)