canvas的绘图2

用户9184480

发布于 2024-12-17 10:09:59

4900

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas1" width="800" height="800"></canvas>
    <script>
      function draw1(){
        var c=document.getElementById("canvas1");
        var ctx=c.getContext("2d");

        ctx.fillStyle='red';
        ctx.fillRect(0,0,150,150);
        ctx.save();
        ctx.fillStyle='green';
        ctx.fillRect(15,15,120,120);
        ctx.save();
        ctx.fillStyle='blue';
        ctx.fillRect(30,30,90,90);

        ctx.restore();
        ctx.fillRect(45,45,60,60);
        ctx.restore();
        ctx.fillRect(60,60,30,30);
      }
      window.addEventListener("load",draw1(),true);
    </script>
  </body>
</html>在

在绘图代码上如果不加save属性会怎么样呢？则默认是红色的，保存一次颜色，需要加一次save.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <canvas id="canvas2" width="800" height="800"></canvas>
    <script>
      function draw2(){
        var c=document.getElementById("canvas2");
        var ctx=c.getContext("2d");

        ctx.fillStyle="red";
        ctx.font="40px 隶书";
        ctx.fillText("Hello H5",0,100);
        ctx.setTransform(1,-0.5,0,-1,0,2);

        ctx.fillText("Hello H5", 0, -100)

      }
      window.addEventListener("load",draw2(),true);
    </script>
  </body>
</html>