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>