canvas-图片旋转

canvas-画布图片旋转

<canvas id="c3" width="500" height="400"></canvas>
  <script>
    var c3=document.getElementById("c3")
    var ctx=c3.getContext("2d")
    // 1:创建图片对象
    var p3=new Image();
    // 2.下载指定图片
    p3.src="../res/p4.png";
    // 3.绑定下载成功事件
    p3.onload=function(){     
      // 3.1创建变量deeg1 deg2
      var deg1=0;
      var deg2=0;
      // 3.2创建定时器    
      setInterval(()=>{
        ctx.clearRect(0,0,500,400)
        // 3.3保存画笔状态save
        ctx.save();
        // 3.4平移原点
        ctx.translate(100,200);
        // 3.5累加deg1角度
        deg1+=15;
        // 3.6旋转
        ctx.rotate(deg1*Math.PI/180);
        // 3.7绘图 
        ctx.drawImage(p3,0-100,0-50);
        // 3.8恢复
        ctx.restore(); 
        // 第二家飞机
        // 1.保存状态
        ctx.save();
        ctx.translate(350,200);
        deg2+=60;
        ctx.rotate(deg2*Math.PI/180);
        ctx.drawImage(p3,0-100,0-50);
        ctx.restore();
      },1)
    }
  </script>