这是我参与更文挑战的第20天，活动详情查看：更文挑战

效果图

引经据典 原文：贝塞尔曲线原理

原理这里就不介绍了，好长啊= =

直接上代码

1. 先写骨架和确定canvas

写一个canvas，并确保定位问题和宽高问题。

html

<template>
  <div class="my-wrapper" v-cloak>
      <!-- 头部 -->
      <div class="my-header row aCenter">
          <!-- canvas背景 -->
          <canvas id="canvas"></canvas>
      </div>
  </div>
</template>
复制代码

css

<style scoped>
.my-header{height: 230px;background-color: #6689e2;position: relative;}
#canvas {position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 230px;}
</style>
复制代码

2. 贝塞尔曲线实现波浪特效

<script lang="ts">
import { defineComponent, onMounted, nextTick } from 'vue'
export default defineComponent({
    name: 'my',
    props: {},
    setup() {
        // 创建canvas动画
        const oninitCanvas = () => {
            nextTick(() => {
              const canvas: any = document.getElementById('canvas'),
                    ctx = canvas.getContext('2d'),
                    height: number = canvas.offsetHeight,
                    width: number = canvas.offsetWidth,
                    lines: string[] = ["rgba(248, 248, 248, .4)", "rgba(248, 248, 248, .5)", "rgba(248, 248, 248, .6)"],
                    boHeight: number = height / 10,
                    posHeight: number = height / 1.8,       // 波浪高度
                    canvasAny: any = { width: width, height: height },
                    requestAnimFrame = (function() {        // 波浪自执行函数
                        return function(callback: any) {
                            setTimeout(callback, 100 / 6)
                        }
                    })()
              let step: number = 0
              // 动起来
              const loop = function() {
                  ctx.clearRect(0, 0, canvasAny.width, canvasAny.height)
                  step++
                  // 画三个不同颜色的矩阵
                  for(let j = lines.length - 1; j >= 0; j--) {
                      // 每个矩阵的角度都不同，每个之间相差100度
                      const angle: number = (step + j * 100) * Math.PI / 180,
                            deltaHeight: number = Math.sin(angle) * boHeight,
                            deltaHeightRight: number = Math.cos(angle) * boHeight
                      ctx.fillStyle = lines[j]
                      ctx.beginPath()   // 开始绘制
                      ctx.moveTo(0, posHeight + deltaHeight)
                      ctx.bezierCurveTo(canvasAny.width / 2, posHeight + deltaHeight - boHeight, canvasAny.width / 2, posHeight + deltaHeightRight - boHeight, canvasAny.width, posHeight + deltaHeightRight)
                      ctx.lineTo(canvasAny.width, canvasAny.height)
                      ctx.lineTo(0, canvasAny.height)
                      ctx.lineTo(0, posHeight + deltaHeight)
                      ctx.fill()      // 上色
                      ctx.closePath() // 结束绘制
                  }
                  requestAnimFrame(loop)    // 启动函数
              }
              // 随机数
              const random = function(min: number, max: number) {
                  return Math.floor(Math.random() * (max - min) + min)
              }
              loop()
            })
        }
        onMounted(() => {
           oninitCanvas()
        })
    }
})
</script>
复制代码

这里有几个槽点：

• // 波浪高度 这东西控制波浪的起伏高度

posHeight: number = height / 1.8       
复制代码

• 这个控制着三个波浪之间的角度

const angle: number = (step + j * 100) * Math.PI / 180 
复制代码

• 这个自制行函数别时间太长，顿挫感太明显了

requestAnimFrame = (function() {        // 波浪自执行函数
    return function(callback: any) {
        setTimeout(callback, 100 / 6)
    }
})()
复制代码

• 这个最重要，一定要在nextTick函数下面去执行，不然会拿不到canvas这个dom对象的

搞掂收工，有不懂的尽管问，我有空就会回复的啦

大佬们，感兴趣可以关注我公众号鸭，现在还是个位数呢，委屈屈…

人懒，不想配图，望能帮到大家

公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦，我是：何小玍。 大家一起进步鸭

记叙文：

• 12～18k的前端面试会问个啥？
• 外包到自营的转变 ｜2021 年中总结

技术文

乱七八糟系列

• uniapp配置ios的Universal Link和associate domains

vue系列

• 【Vue版本 – 前端实践系列之九】登录注册界面千篇一律？教你做个炫酷的！
• vue3的setup和Ref 语法
• vue3的provide和inject
• [项目篇]vue3 + vite + vant + typescript – 第一天
• [项目篇]vue3+ts 封装request请求，storage缓存，config请求信息抽离 – 第二天

typescript系列

• 手摸手一起学习Typescript第一天，数据类型和vscode的搭配typescript
• 手摸手一起学习Typescript第二天，interface接口和readonly属性
• 手摸手一起学习Typescript第三天 – 函数Function
• 手摸手一起学习Typescript第四天 – 类型推论，联合类型 和 类型断言
• 手摸手一起学习Typescript第五天 – Class 类 / 类与接口
• 手摸手一起学习Typescript第六天 – 泛型 Generics / 泛型约束 / 泛型与类和接口
• 手摸手一起学习Typescript第七天 – 类型别名 和 交叉类型
• 手摸手一起学习Typescript第八天 – 声明文件 、内置类型

react-native系列

• react-native生命周期详解
• [react-native]JSX和RN样式以及和web的不同之处
• [react-native]mobx （react中全局数据管理库， 可以简单的实现数据的跨组件共享，类似于vue中的vuex）