canvas学习笔记3--绘制时钟

translate移动
canvas的translate相当于移动画布的坐标原点位置，而且在这之后画的东西也是按照移动后的坐标原点来画

var canvas = document.querySelector("#canvas")
var cxt = canvas.getContext("2d")

cxt.translate(300,0)
cxt.fillStyle = "deepskyblue"
//填充一个矩形
cxt.fillRect(100,100,300,100)

rotate旋转
参数是带π的弧度
默认旋转的中心是坐标轴原点，而且是整个坐标轴旋转了，在这之后画的东西也是按照旋转之后的坐标来画了

cxt.ratate(Math.PI/4)

scale缩放
参数是 x轴缩放倍数，y轴缩放倍数
默认值是1,1 也就是不放大也不缩小
这里也是放大了坐标尺，并不是放大画像

//x轴放大2倍，y轴放大4倍
ctx.scale(2,4)
//放大之后，乘以相应的数变为1即可复原
ctx.scale(0.5,0.25) // 2*0.5=1,4*0.25=1

save与restore保留与恢复状态
使用这对方法就可以不用每次都计算来复原坐标原点位置，缩放，画笔颜色等
可以执行多次save保留状态，但是恢复时也要执行对应多次才可以恢复到对应状态。类似于撤销

//保留环境的状态（画笔的状态）
cxt.save()
cxt.scale(2,4)
//恢复之前保留的画笔状态
cxt.restore()

绘制钟表

<canvas id="canvas" width="800" height="600"></canvas>

<script>
	var canvas = document.querySelector("#canvas)
	var cxt = canvas.getContext("2d")
	
function renderClock(){
    
    
	cxt.clearRect(0,0,800,600)
	cxt.save()
	//将坐标原点移动到画布的中央
	cxt.translate(400,300)
	//将坐标系逆时针旋转90度
	cxt.rotate(-2*Math.PI/4)

	cxt.save()
	//绘制表盘
	cxt.beginPath()
	cxt.arc(0,0,200,0,2*Math.PI)
	cxt.strokeStyle = "darkgrey"
	cxt.lineWidth = 10
	cxt.stroke()
	cxt.closePath()
	
	//绘制分钟刻度
	for(var j=0;j<60;j++){
    
    
		cxt.rotate(Math.PI/30)
		cxt.beginPath()
		cxt.moveTo(180,0)
		cxt.lineTo(190,0)
		cxt.lineWidth = 2
		cxt.strokeStyle = "orangered"
		cxt.stroke()
		cxt.closePath()
	}
	cxt.restore()
	cxt.save()

	//绘制时钟刻度
	for(var i=0;i<12;i++){
    
    
		cxt.rotate(Math.PI/6)
		cxt.beginPath()
		cxt.moveTo(180,0)
		cxt.lineTo(200,0)
		cxt.lineWidth = 10
		cxt.strokeStyle = "darkgrey"
		cxt.stroke()
		cxt.closePath()
	}
	cxt.restore()
	cxt.save()
	
	var time = new Date()
	var hour = time.getHours()
	var min = time.getMinutes()
	var sec = time.getSeconds()
	//如果时间大于12的话，就直接减去12
	hour=hour>12?hour-12:hour

	//绘制秒针
	cxt.beginPath()
	//根据秒针的时间进行旋转
	cxt.rotate(2*Math.PI/60*sec)
	cxt.moveTo(-30,0)
	cxt.lineTo(170,0)
	cxt.lineWidth = 2
	cxt.strokeStyle = "red"
	cxt.stroke()
	cxt.closePath()
	
	cxt.restore()
	cxt.save()

	//绘制分针
	cxt.beginPath()
	//根据分针的时间进行旋转
	cxt.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)
	cxt.moveTo(-20,0)
	cxt.lineTo(150,0)
	cxt.lineWidth = 4
	cxt.strokeStyle = "darkblue"
	cxt.stroke()
	cxt.closePath()

	cxt.restore()
	cxt.save()

	//绘制时针
	cxt.beginPath()
	//根据时针的时间进行旋转
	cxt.rotate(2*Math.PI/12*hour+2*Math.PI/60/12*min+2*Math.PI/12/60/60*sec)
	cxt.moveTo(-10,0)
	cxt.lineTo(140,0)
	cxt.lineWidth = 6
	cxt.strokeStyle = "darkslategray"
	cxt.stroke()
	cxt.closePath()
	
	cxt.beginPath()
	cxt.arc(0,0,10,0,2*Math.PI)
	cxt.fillStyle = "deepskyblue"
	cxt.fill()
	cxt.closePath()	

	cxt.restore()	
	cxt.restore()
}

setInterval(function(){
    
    
	renderClock()
},1000)
</script>