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

效果图

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

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

直接上代码前端

1. 先写骨架和肯定canvas

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

htmlreact

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

cssios

<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>
复制代码

这里有几个槽点：web

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

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对象的

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

大佬们，感兴趣能够关注我公众号鸭，如今仍是个位数呢，委屈屈...vuex

人懒，不想配图，望能帮到你们typescript

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

有兴趣的小伙伴欢迎关注我哦，我是：何小玍。 你们一块儿进步鸭

[项目篇]vue3+ts canvas实现贝塞尔曲线波浪特效 - 第四天

效果图

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

1. 先写骨架和肯定canvas

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

记叙文：

技术文

乱七八糟系列

vue系列

typescript系列

react-native系列

[项目篇]vue3+ts canvas实现贝塞尔曲线波浪特效 - 第四天

效果图

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

1. 先写骨架和肯定canvas

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

记叙文：

技术文

乱七八糟系列

vue系列

typescript系列

react-native系列

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