html5的canvas知识

今天需要在项目中用到一个时钟的效果图：初试canvas小实验，代码

var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
context.strokeRect(0,0,canvas.width,canvas.height)
context.beginPath()
context.arc(200,150,5,0,2*Math.PI,true)
context.strokeStyle = '#00f'
context.fillStyle = '#00f'
context.fill()
context.closePath()
context.beginPath()
context.arc(200,150,100,0,2*Math.PI,true)
context.strokeStyle = '#00f'
context.stroke()
context.closePath()
 context.beginPath()
context.translate(200,150)
context.rotate(-Math.PI/2)
for(var i = 0; i<60;i++){
 　　if(i % 5 == 0){
       　　context.fillRect(80,0,20,5)    
      　　context.fillText(""+(i /5 == 0 ? 12 : i/5),70,10)//0就是12
　　}else{
       　　context.fillRect(90,0,10,2)    
　　}
　　 context.rotate(Math.PI/30)
}
context.save();
context.closePath()
var ls = 0, lm = 0, lh = 0;
setInterval(function(){
        context.restore();   
        context.save();   

　　 //主要是为了消除上次秒针留下来的痕迹，如果不清除的话，在canvas中就会一直存在
        context.rotate(ls * Math.PI / 30);   
        context.clearRect(5, -1, slen+1, 2+2);   
        context.restore(); context.save();   
      //主要是为了消除上次分针留下来的痕迹，如果不清除的话，在canvas中就会一直存在
        context.rotate(lm * Math.PI / 30);   
        context.clearRect(5, -1, mlen+1, 3+2);   
        context.restore(); context.save();   
      //主要是为了消除上次时针留下来的痕迹，如果不清除的话，在canvas中就会一直存在
        context.rotate(lh * Math.PI / 6);   
        context.clearRect(5, -3, hlen+1, 4+2);    

         var time = new Date()
            var h = lh =time.getHours()
                m = lm = time.getMinutes()
                s = ls = time.getSeconds()
                context.restore(); context.save();
                context.rotate(h * Math.PI / 6);   //时针为30度
                context.fillRect(5, -2, 40, 4);   
                context.restore(); context.save();
                context.rotate(m*Math.PI/30)
                context.fillRect(5, -2, 50, 4);
                context.restore();context.save();
                context.rotate(s*Math.PI/30)
                context.fillRect(5, -2, 60, 4);    
                context.restore();context.save();
            },1000)     

这个例子中重点：

translate():平移，就是将坐标原点从一个地方移到参数指定的地方

rotate():旋转多少角度，x轴的方向就变了，下次绘制路径的时候，x轴和y轴的方向就变了

save():保存当前绘制的状态（例：平移状态，旋转状态）

restore():复原上次保存的状态，但是画布上新画的一些东西都还是存在的，

      

转载于:https://www.cnblogs.com/xiaohui108/archive/2012/03/11/2390645.html