canvas学习笔记（六）----变形_canvas onload图片尺寸变形-优快云博客

本文是canvas学习笔记的第六篇，主要介绍了canvas中的变形操作，包括save和restore状态管理，translate进行左右上下偏移，rotate实现角度旋转，以及scale用于缩放画布的长度和宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.save（）保存画布的所有状态

2.restore（）恢复状态

3.translate（x，y）左右偏移量和上下偏移量

4.rotate（angle）旋转的角度

5.scale(scaleWidth,scaleHeight)缩放的长度和宽度(1=100%,0.5=50%)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day4-2</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        ctx.fillRect(0,0,150,150);
        ctx.save();
        ctx.fillStyle = '#09F'
        ctx.fillRect(15,15,120,120)
        ctx.save();
        ctx.fillStyle = '#FFF'
        ctx.globalAlpha = 0.5
        ctx.fillRect(30,30,90,90);
        ctx.restore()
        ctx.fillRect(45,45,60,60);
        ctx.restore();
        ctx.fillRect(60,60,30,30)
      }else{}
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day4-4</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        for(var i=0;i<3;i++){
          for(var j=0;j<3;j++){
            ctx.save();
            ctx.fillStyle = 'rgb(' + (51*i) + ',' + (255-51*i) + ',255)'
            ctx.translate(10+j*50,10+i*50);
            ctx.fillRect(0,0,25,25)
            ctx.restore()
          }
        }
      }else{}
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day4-4</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        ctx.translate(75,75);
        for(var i=1;i<6;i++){
          ctx.save();
          ctx.fillStyle = 'rgb(' + (51*i) + ',' + (255-51*i) + ',255)';
          for(var j=0;j<i*6;j++){
            ctx.rotate(Math.PI*2/(i*6));
            ctx.beginPath();
            ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
            ctx.fill();
          }
          ctx.restore()
        }
      }else{}
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day4-5</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        ctx.save();
        ctx.scale(10,3);
        ctx.fillRect(1,10,10,10);
        ctx.restore();

        ctx.scale(-1,1);
        ctx.font = '48px serif';
        ctx.fillText('MDN', -135, 120)
      }else{}
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day4-6</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="200" height="200">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        var sin = Math.sin(Math.PI/6)
        var cos = Math.cos(Math.PI/6)
        ctx.translate(100,100)
        var c=0
        var f = function(a){
          setTimeout(function(){
            c=Math.floor(255/12*a)
            ctx.fillStyle = "rgb("+c+","+c+","+c+")";
            ctx.fillRect(0,0,100,10);
            ctx.transform(cos,sin,-sin,cos,0,0);
          },100*a)
        }
        for(var i=0; i<=12;i++){
          f(i)
        }
        // ctx.setTransform(-1,0,0,1,100,100)
        // ctx.fillStyle = "rgba(255,128,2255,0.5)";
        // ctx.fillRect(0,50,100,100)
      }else{}
    }
  </script>
</body>
</html>