写一个静态的雪花【canvas】

最新推荐文章于 2022-08-04 11:40:09 发布

outside-R

最新推荐文章于 2022-08-04 11:40:09 发布

阅读量126

点赞数

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_45044349/article/details/117935169

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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

<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();

outside-R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
写一个静态的雪花【canvas】

利用角度、坐标轴画雪花<style> * { padding: 0; margin: 0; } html, body { /* 隐藏滚动条 */ overflow: hidden; } canvas { background: #000; } &lt..
复制链接

扫一扫