Canvas的效果操作及save()和restore()方法应用

原文:http://blog.163.com/gobby_1110/blog/static/29281715201010188417838/


平移、缩放、旋转等操作等于是,我在一个正的画布绘制好图,然后再把画布做旋转、平移、缩放等等的效果。

也就是说,我使用的X、Y坐标还是正常的坐标(没旋转、平移、缩放等之前的坐标)。

 

save()和restore()是用来规定操作的范围的。

如果有save()和restore(),那么平移、缩放、旋转等操作只对save()和restore()作用域之间的代码有效。

在此我参考了http://www.javaeye.com/topic/440623

 

然后我做了代码测试(在onDraw()中画图),如下:

protected void onDraw(Canvas canvas){
  //首先定义中心点和半径
  int px=getMeasuredWidth()/2;
  int py=getMeasuredHeight()/2;
  
  int radius=Math.min(px, py);
  
  canvas.drawCircle(px, py, radius, circlePaint);
  canvas.save();//注释save①
  canvas.rotate(-bearing, px, py);
  //canvas.save();
  
  int textWidth=(int)textPaint.measureText("W");
  int cardinalX=px-textWidth/2;
  int cardinalY=py-radius+textHeight;
  
  //开始绘制刻度和文字
  //每15度一个刻度,每45度一个数字,每90度一个方向
  for(int i=0; i<24; i++){
   canvas.drawLine(px, py-radius, px, py-radius+10, markerPaint);
   
   canvas.save();//注释save②
   canvas.translate(0, textHeight);
   
   
   if(i%6==0){
    String dirString="";
    switch(i){
    case(0):{
     dirString=northString;
     int arrowY=2*textHeight;
     canvas.drawLine(px, arrowY, px-5, 3*textHeight, markerPaint);
     canvas.drawLine(px, arrowY, px+5, 3*textHeight, markerPaint);
     break;
    }
    case(6):dirString=eastString;break;
    case(12):dirString=westString;break;
    case(18):dirString=southString;break;
    }
    canvas.drawText(dirString, cardinalX, cardinalY, textPaint);
   }
   else if(i%3==0){
    String angle=String.valueOf(i*15);
    float angleTextWidth=textPaint.measureText(angle);
    
    int angleX=(int)(px-angleTextWidth/2);
    int angleY=py-radius+textHeight;
    canvas.drawText(angle, angleX, angleY, textPaint);
   }
   canvas.restore();//注释restore②   
   canvas.rotate(15, px, py);
   
  }
  //测试save()和restore()的作用域
  canvas.drawText("Hello world 在restore之前!", 100, 100, textPaint);
  canvas.restore();//注释restore①
  canvas.drawText("Hello world 在restore之后!", 100, 100, textPaint);
 }

//结论:在save②到restore②之间所画的图顶点下移textHeight个像素,restore②之后的代码不受影响

//在save①到restore①之间所画的内容都选择45°,restore①之后的代码不会旋转

//注意save②到restore②也是在save①到restore①作用之内的,所以save②到restore②之间的内容不但顶点下移textHeight个像素,并且旋转

//45度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 canvas 是一个强大的绘图API,提供了一些方法来帮助开发者控制绘图状态。其中两个非常有用的方法是 save() 和 restore()。 save() 方法用于保存当前绘图状态,包括当前的变换矩阵、剪切区域和样式属性等。调用 save() 方法后,我们可以对绘图状态进行任意修改,而不会影响到之前保存的状态。 restore() 方法用于恢复之前保存的绘图状态。调用 restore() 方法后,我们可以回到之前保存的状态,并且继续在该状态下进行绘图操作。 这两个方法通常是成对使用的。例如,我们可以在进行一些复杂的绘图操作之前调用 save() 方法来保存当前状态,然后在绘制完成后调用 restore() 方法来恢复之前的状态。这样可以避免对后续绘图操作造成影响。 下面是一个简单的示例代码,演示了如何在 canvas 中使用 save() 和 restore() 方法: ```html <canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 保存当前状态 ctx.save(); // 绘制一个矩形,并修改一些属性 ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); ctx.strokeStyle = "blue"; ctx.lineWidth = 3; ctx.strokeRect(20, 20, 30, 30); // 恢复之前的状态 ctx.restore(); // 绘制一个圆形,此时样式属性已经恢复到之前的状态 ctx.beginPath(); ctx.arc(100, 50, 30, 0, 2*Math.PI); ctx.fillStyle = "green"; ctx.fill(); </script> ``` 在上面的代码中,我们首先调用了 save() 方法来保存当前状态,然后绘制了一个红色填充、蓝色边框的矩形。接着,我们又调用了 restore() 方法来恢复之前保存的状态。最后,我们绘制了一个绿色的圆形,此时样式属性已经恢复到之前的状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值