写一个静态的雪花【canvas】

在这里插入图片描述

在这里插入图片描述
利用角度、坐标轴画雪花

<style>
        * {
      
      
            padding: 0;
            margin: 0;
        }

        html,
        body {
      
      
            /* 隐藏滚动条 */
            overflow: hidden;
        }

        canvas {
      
      
            background: #000;
        }
    </style>
  <body
    <canvas id="myCanvas"></canvas>
   <script src="./index.js"></script>
  </body>

index.js

  var myCanvas = document.getElementById('myCanvas'); // 拿到画布
        var ctx = myCanvas.getContext('2d') // 拿到画笔

        // 设置canvas宽高
        myCanvas.width = window.innerWidth;
        myCanvas.height = window.innerHeight;
 /**
         * 调用一次，生成一个雪花
         */
        function Snow(){
    
    
           ctx.save();
            // 利用画笔
            ctx.beginPath();
            // 颜色
            ctx.strokeStyle = '#fff';
            // 加粗
            ctx.lineWidth = 10;
            // 圆角
            ctx.lineCap = 'round';
            // 平移坐标系
            ctx.translate(100, 100);
            // 旋转
            ctx.rotate((20 * Math.PI) / 180);
            // 缩放比例
            ctx.scale(1.5, 1.5);
            // 第一个点
            ctx.moveTo(-20, 0);
            // 到第二个点
            ctx.lineTo(20, 0);

            // sin(弧度值)
            var disX = 20 * Math.sin((30 * Math.PI) / 180);
            var disY = 20 * Math.sin((60 * Math.PI) / 180);

            // 第一个点
            ctx.moveTo(-disX, -disY);
            // 到第二个点
            ctx.lineTo(disX, disY);


            // 第一个点
            ctx.moveTo(-disX, disY);
            // 到第二个点
            ctx.lineTo(disX, -disY);
            // 描边
            ctx.stroke();
            ctx.closePath();

            //想要第二个雪花，改变坐标系来搞定位置 ，但下一个的坐标系是基于第一个雪花的坐标系进行改变【则加入 ctx.save();ctx.restore();会使得屏幕左上角为（0,0）】
            ctx.restore();
}
Snow();

写一个静态的雪花【canvas】

猜你喜欢