HTML5动画----canvas基础3（变换图形--普通变换）

最新推荐文章于 2024-04-12 10:30:40 发布

wenmin1987

最新推荐文章于 2024-04-12 10:30:40 发布

阅读量429

点赞数

分类专栏： HTML5动画

本文链接：https://blog.csdn.net/wenmin1987/article/details/94361454

版权

HTML5动画专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Canvas状态指的是当前画面所有样式、变形和裁切的一个快照，以堆（Stack）的方式保存。

context.save(); 暂时把状态（各种属性的值，如strokeStyle,fillStyle,globalComositeOperation等，当前应用的变形，当前的裁切路径等）保存在堆中

context.restore()；把保存的状态从堆中取出，恢复该状态的所有设置。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>保存和恢复Canvas状态</title>
   </head>
   <body>
       <canvas id="myCanvas" style="border: solid 1px;" width="300" height="200"></canvas>
       <script type="text/javascript">
           var c = document.getElementById("myCanvas");
           var context = c.getContext('2d');
           context.fillStyle = "#ff00ff";
           context.strokeStyle = "blue";
           context.fillRect(20,20,100,100);
           context.strokeRect(20,20,100,100);
           context.fill();
           context.stroke();
           //保存当前Canvas状态
           context.save();
           //绘制另一个矩形
           context.fillStyle = "#ff0000";
           context.strokeStyle = "green";
           context.fillRect(140,20,100,100);
           context.strokeRect(140,20,100,100);
           context.fill();
           context.stroke();
           //恢复第一个矩形的状态
       context.restore();
           //绘制两个矩形
           context.fillRect(20,140,50,50);
//           context.strokeRect(20,140,50,50);
//           context.fillRect(80,140,50,50);
           context.strokeRect(80,140,50,50);
       </script>
   </body>
</html>

移动坐标空间：context.translate(dx,dy)

旋转坐标空间：context.rotate(angle)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <script type="text/javascript">
           function drawTop(ctx,fillStyle){
               ctx.fillStyle = fillStyle;
               ctx.beginPath();
               ctx.arc(0,0,30,0,Math.PI,true);
               ctx.closePath();
               ctx.fill();

           }
           function drawGrip(ctx){
               ctx.save();
               ctx.fillStyle = "blue";
               ctx.fillRect(-1.5,0,1.5,40);
               ctx.beginPath();
               ctx.strokeStyle = "blue";
               ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
               ctx.stroke();
               ctx.closePath();
               ctx.restore();

           }
//           function draw(){//移动坐标空间
//               var c = document.getElementById("myCanvas");
//               var ctx = c.getContext('2d');
//               //注意：所有的移动都是基于这一上下文 context.translate(dx,dy); dx,dy分别为x和y的原点的偏移量
//               ctx.translate(80,80);
//               for(var i=1;i<10;i++){
//                   ctx.save();
//                   ctx.translate(60*i,0);
//                   drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
//                   drawGrip(ctx);
//                   ctx.restore();
//               }
//
//           }
function draw(){
               var c = document.getElementById("myCanvas");
               var ctx = c.getContext('2d');
               //注意：所有的移动都是基于这一上下文 context.translate(dx,dy); dx,dy分别为x和y的原点的偏移量
               ctx.translate(150,150);
               for(var i=1;i<9;i++){
                   ctx.save();//变换之前养成先使用save()保存当前状态的习惯
                   ctx.rotate(Math.PI*(2/4 + i/4));
                   ctx.translate(0,-100);
                   drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
                   drawGrip(ctx);
                   ctx.restore();
               }

           }
           window.onload = function(){
               draw();
           }
       </script>
       <canvas id="myCanvas" width="700" height="300" style="border:solid 1px;"></canvas>
   </body>
</html>

缩放图形：context.scale(x,y); x为横轴缩放因子，y为纵轴缩放因子

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>缩放图形</title>
   </head>
   <body>
       <script type="text/javascript">
           function draw(){
               var ctx = document.getElementById("myCanvas").getContext('2d');
               ctx.translate(200,20);
               for(var i=1;i<80;i++){
                   ctx.save();
                   ctx.translate(30,30);
                   ctx.scale(0.95,0.95);
                   ctx.rotate(Math.PI/12);
                   ctx.beginPath();
                   ctx.fillStyle = "red";
                   ctx.globalAlpha = "0.4";
                   ctx.arc(0,0,50,0,Math.PI*2,true);
                   ctx.closePath();
                   ctx.fill();
               }
           }
           window.onload = function(){
               draw();
           }
       </script>
       <canvas id="myCanvas" width="700" height="300" style="border:solid 1px;"></canvas>
   </body>
</html>