Canvas进阶-7、动画应用（粒子效果）

已于 2025-04-11 09:56:30 修改
阅读量1.3k 收藏 29
点赞数 38
分类专栏： canvas学习 文章标签： nginx 运维 vue.js 前端 javascript html
于 2025-02-21 09:22:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yong_su/article/details/145769035
版权

学了这么久也该实践应用一下，在我们勤勤恳恳的工作之余（bushi）来画一个经常用到的粒子动画吧

请添加图片描述

今天是周五，糟糕快下班了让我们抓点紧学完下班咯 🕔 ❗❗❗

这就是本期我们要实现的效果啦，粒子动画，鼠标跟随及点击增加

请添加图片描述

话不多说上代码我们细细分析：

1.起手一个平A　先来个<canvas>

<template>
  <div ref="body" style="width: 100%;height: 100vh;">
    <canvas id="myCanvas"></canvas>
  </div>
</template>

2.初始化我们的canvas

获取当前区域宽高，初始化canvas，并保存宽高为下一步做准备

      const body = this.$refs.body
      const canvas = document.getElementById('myCanvas')

      canvas.width = body.clientWidth
      canvas.height = body.clientHeight

      let aw = canvas.width
      let ah = canvas.height

      const ctx = canvas.getContext('2d')
      // 自适应宽高
      window.addEventListener('resize', () => {
        canvas.width = body.clientWidth
        canvas.height = body.clientHeight
        aw = canvas.width
        ah = canvas.height
        const ctx = canvas.getContext('2d')
      })

3.定义个类我们叫做star⭐

  • 首先是他的宽高及半径，不要问为啥star是个球，因为简单着急下班🙄
  • 第二绘制我们的⭐ arc() 嘿嘿画圆
  • 第三设置边界，顺便前期复习，也可选择超界消失根据个人喜好
   class Star {
        constructor(x, y, radius) {
          // x，y是坐标，r是半径
          this.x = x
          this.y = y
          this.r = radius
          // speed参数，在  -3 ~ 3 之间取值 随机速度初始化:
          this.speedX = Math.random() * 3 * Math.pow(-1, Math.round(Math.random()))
          this.speedY = Math.random() * 3 * Math.pow(-1, Math.round(Math.random()))
        }
        // 绘制圆球
        draw() {
          ctx.beginPath()
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
          ctx.fill()
          ctx.closePath()
        }
        // 设置边界反弹
        move() {
          this.x -= this.speedX
          this.y -= this.speedY
          // 碰到边界时，反弹，只需要把speed取反就行
          if (this.x < 0 || this.x > aw) this.speedX *= -1
          if (this.y < 0 || this.y > ah) this.speedY *= -1
        }
        // 绘制连线
        drawLine(startX, startY, endX, endY) {
          ctx.beginPath()
          ctx.moveTo(startX, startY)
          ctx.lineTo(endX, endY)
          ctx.stroke()
          ctx.closePath()
        }
      }

4.所需事件，移动及点击

//前期有讲解，绑定鼠标移动事件
 const getMouse = element => {
        let mouse = { x: 0, y: 0 }
        element.addEventListener('mousemove', e => {
          mouse.x = e.clientX - element.getBoundingClientRect().left // 使用clientX和getBoundingClientRect计算鼠标位置
          mouse.y = e.clientY - element.getBoundingClientRect().top
        })

        return mouse
      }
//绑定canvas的点击事件，注意保持数组数量始终一致
canvas.addEventListener('click', e => {
        // 使用clientX和getBoundingClientRect计算鼠标位置
        let x = e.clientX - canvas.getBoundingClientRect().left 
        let y = e.clientY - canvas.getBoundingClientRect().top

        for (let i = 0; i < 10; i++) {
          let newStar = new Star(x, y, 3)
          stars.push(newStar)
        }
        stars.splice(0, 10)
      })

5. ⭐⭐⭐终点绘制动画来了！！！

      // 定义颜色，色调都是白色
      ctx.fillStyle = 'white'
      ctx.strokeStyle = 'white'
      // 获取鼠标创造鼠标点球
      let mouse = getMouse(canvas)
      let mouseStar = new Star(0, 0, 3)
      let stars = []
      for (let index = 0; index < 300; index++) {
        stars.push(new Star(Math.random() * aw, Math.random() * ah, 3))
      }
      //立即执行
      ;(function frame() {
        window.requestAnimationFrame(frame)
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        //鼠标点绘制
        mouseStar.x = mouse.x
        mouseStar.y = mouse.y
        mouseStar.draw()
        // 散点球绘制
        stars.forEach(star => {
          star.draw()
          star.move()
        })
        //这里重点理解
        // 对比每一个圆球，如果当前x,y与另一个圆球x,y间距小于50，就绘制连线
        // Math.abs 是一个数学函数，用于计算一个数的绝对值永远是正数
        stars.forEach((star, i) => {
          stars.forEach((otherStar, j) => {
            if (i !== j && Math.abs(star.x - otherStar.x) < 50 && Math.abs(star.y - otherStar.y) < 50) {
              star.drawLine(star.x, star.y, otherStar.x, otherStar.y)
            }
            // 判断鼠标星星连线
            if (Math.abs(mouseStar.x - star.x) < 50 && Math.abs(mouseStar.y - star.y) < 50) {
              mouseStar.drawLine(mouseStar.x, mouseStar.y, star.x, star.y)
            }
          })
        })
      })()

这里就结束咯，！！！！要认真看注释，哪里不理解可以提问我！

贴完整代码：

<template>
  <div ref="body" style="width: 100%;height: 80vh;background: #000;">
    <canvas id="myCanvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.init()
  },

  methods: {
    init() {
      // 定义球形及初速度
      class Star {
        constructor(x, y, radius) {
          // x，y是坐标，r是半径
          this.x = x
          this.y = y
          this.r = radius
          // speed参数，在  -3 ~ 3 之间取值 随机速度初始化:
          this.speedX = Math.random() * 3 * Math.pow(-1, Math.round(Math.random()))
          this.speedY = Math.random() * 3 * Math.pow(-1, Math.round(Math.random()))
        }
        // 绘制圆球
        draw() {
          ctx.beginPath()
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
          ctx.fill()
          ctx.closePath()
        }
        // 设置边界反弹
        move() {
          this.x -= this.speedX
          this.y -= this.speedY
          // 碰到边界时，反弹，只需要把speed取反就行
          if (this.x < 0 || this.x > aw) this.speedX *= -1
          if (this.y < 0 || this.y > ah) this.speedY *= -1
        }
        // 绘制连线
        drawLine(startX, startY, endX, endY) {
          ctx.beginPath()
          ctx.moveTo(startX, startY)
          ctx.lineTo(endX, endY)
          ctx.stroke()
          ctx.closePath()
        }
      }

      const body = this.$refs.body
      const canvas = document.getElementById('myCanvas')

      canvas.width = body.clientWidth
      canvas.height = body.clientHeight

      let aw = canvas.width
      let ah = canvas.height

      const ctx = canvas.getContext('2d')
      // 自适应宽高
      window.addEventListener('resize', () => {
        canvas.width = body.clientWidth
        canvas.height = body.clientHeight
        aw = canvas.width
        ah = canvas.height
        const ctx = canvas.getContext('2d')
      })

      const getMouse = element => {
        let mouse = { x: 0, y: 0 }
        element.addEventListener('mousemove', e => {
          mouse.x = e.clientX - element.getBoundingClientRect().left // 使用clientX和getBoundingClientRect计算鼠标位置
          mouse.y = e.clientY - element.getBoundingClientRect().top
        })

        return mouse
      }

      canvas.addEventListener('click', e => {
        let x = e.clientX - canvas.getBoundingClientRect().left // 使用clientX和getBoundingClientRect计算鼠标位置
        let y = e.clientY - canvas.getBoundingClientRect().top

        for (let i = 0; i < 10; i++) {
          let newStar = new Star(x, y, 3)
          stars.push(newStar)
        }
        stars.splice(0, 10)
      })

      // 定义颜色，色调都是白色
      ctx.fillStyle = 'white'
      ctx.strokeStyle = 'white'
      // 获取鼠标创造鼠标点球
      let mouse = getMouse(canvas)
      let mouseStar = new Star(0, 0, 3)
      let stars = []
      for (let index = 0; index < 300; index++) {
        stars.push(new Star(Math.random() * aw, Math.random() * ah, 3))
      }
      ;(function frame() {
        window.requestAnimationFrame(frame)
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        //鼠标点绘制
        mouseStar.x = mouse.x
        mouseStar.y = mouse.y
        mouseStar.draw()
        // 散点球绘制
        stars.forEach(star => {
          star.draw()
          star.move()
        })
        stars.forEach((star, i) => {
          stars.forEach((otherStar, j) => {
            // 对比每一个圆球，如果当前x,y与另一个圆球x,y间距小于50，就绘制连线
            // Math.abs 是一个数学函数，用于计算一个数的绝对值永远是正数
            if (i !== j && Math.abs(star.x - otherStar.x) < 50 && Math.abs(star.y - otherStar.y) < 50) {
              star.drawLine(star.x, star.y, otherStar.x, otherStar.y)
            }
            // 判断鼠标星星连线
            if (Math.abs(mouseStar.x - star.x) < 50 && Math.abs(mouseStar.y - star.y) < 50) {
              mouseStar.drawLine(mouseStar.x, mouseStar.y, star.x, star.y)
            }
          })
        })
      })()
    }
  }
}
</script>
<style lang="scss" scoped>
canvas {
  border: 1px solid black;
  background-color: #f0f0f0;
  margin-right: 10px;
  background: url('https://img2.baidu.com/it/u=2966362877,3794426626&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=2080')
    no-repeat;
  background-size: 100% 100%;
}
</style>

到此canvas动画实战学习结束，道阻且长，行则将至。与诸君共勉。 zuo

canvas实现粒子特效
qq_35192247的博客
12-25 2589
canvas实现粒子特效 前言 前段时间在学习canvas，实现了一些有趣的功能，最近有时间就把它拿出来分享一下。 成品图 思路 将这个功能先分析拆解一下： 一张画布上放一个背景图 有很多小球在运动 每个小球的速度和方向不同 碰撞到边界会反弹 我会按照以下顺序来进行实现： 1.图片作为背景 2.绘制一个静止小球 3.让一个小球运动起来 4.绘制多个小球并让他们运动起来 5.实现小球的反弹 一...
Android Canvas进阶之自定义View实现粒子爆炸效果
zb987570437的博客
09-07 677
话不多少，先上效果图，觉得简单的请轻喷。 老婆爆炸。。。哦不，是图片爆炸后是多个粒子移动，因此每个粒子都是一个对象，首先定义粒子对象，粒子是圆形的，首先是粒子的颜色，，然后是粒子的圆心坐标和粒子半径，这就已经能够确定一个粒子，然后爆炸后粒子需要有速度和加速度，上码 public class Ball { public int color; //图片像素点颜色值 publi...
canvas粒子动画背景的实现示例
12-14
效果 :slightly_smiling_face: 不带连线效果： 带连线的效果： 教程 要实现这样的效果其实很简单，大概分为这么几个步骤： 创建canvas 首先需要在需要展示粒子背景的父元素中创建一个canvas标签, 指定width和height, 在我们生成随机点坐标的时候需要用width和height来做参照。width和height等于父元素的宽和高。 // 假如父元素是body const ele = document.body; const canvas = document.createElement('canvas'); canvas.width = ele.clientWidth; canvas.heigh
HTML5 Canvas发光夜景动画特效深入解析
最新发布
weixin_35414484的博客
05-01 946
Canvas提供了两种基本的渐变类型：和。它们分别用于创建线性渐变和径向渐变。下面的代码展示了如何创建这两种渐变并应用到Canvas上。// 获取Canvas上下文// 创建线性渐变// 创建径向渐变交互设计在动画场景中的作用是创建一个吸引用户参与的环境，使得动画不仅仅是视觉上的享受，而且是互动体验的一部分。通过精心设计的交互和动画，可以显著提升用户对产品的记忆度和满意度。
Canvas 文本转粒子效果
weixin_34294649的博客
02-13 225
通过粒子来绘制文本让人感觉很有意思，配合粒子的运动更会让这个效果更加酷炫。本文介绍在 canvas 中通过粒子来绘制文本的方法。 实现原理 总的来说要做出将文本变成粒子展示的效果其实很简单，实现的原理就是使用两张 canvas，一张是用户看不到的 A canvas，用来绘制文本；另一张是用户看到的 B canvas，用来根据 A 的文本...
canvas实现的粒子效果
a919149282的博客
11-27 439
前言：我的这个share很简单，没什么技术水准，主要是我自己觉得canvas这个标签很cool！，简单实用又能装X,而且又能实现很多看起来很炫的东西。 一 关于canvas <canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的HTML元素. <canvas>最早由Apple引入WebKit，用于Mac OS X 的 D...
canvas粒子动画效果
qq_22317389的博客
04-25 663
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
canvas 粒子效果
十一的博客
04-12 348
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
elCanvas一种轻量级动画引擎可在Canvas上制作动画
08-11
- **粒子系统**：创建多个小的动画对象，模拟火花、烟雾等效果。 **5. 进阶使用** - **自定义渲染逻辑**：覆盖默认的渲染方法，实现个性化的对象绘制。 - **时间线和动画组合**：通过时间线管理多个动画，实现...
canvas进阶——实现静态图像的变形并合成动态效果
一只
01-22 4409
写在最前在之前的这篇bezierMaker.js——N阶贝塞尔曲线生成器的文章中我们提到了对于高阶贝塞尔公式的绘制与生成。不过更多的童鞋看到后可能会不知道其使用场景是什么。故作者本次分享一下基于bezierMaker.js实现的将静态图片按照自定义曲线轨迹扭曲图片并合称为动态效果。欢迎关注我的博客，不定期更新中——效果预览之前的描述可能不是很清楚我们直接看下效果图：首先加载一张图： 然后通过bez
Android进阶：自定义动画的音频抖动效果
迪士尼在逃程序员の博客
04-26 530
自定义动画效果——音频抖动效果 绘制一个矩形： 想要绘制一个矩形，继承View，并重写onDraw方法即可。复杂一点还可以重写onMeasure方法和onLayout方法进行大小测量和位置测量。但本文不打算写那么复杂的view，故只需要重写一个onDraw方法即可： private RectF rectF = new RectF();//绘制矩形 private float lineWi...
canvas 粒子动画.zip
07-04
canvas 粒子动画
canvas实现粒子场的动画效果
08-10
canvas实现粒子场的动画效果,实现效果：粒子会动并且在一定范围内粒子之间出现连线
Canvas 粒子效果文本动画
10-30
Canvas 粒子效果文本动画
HTML5 Canvas粒子效果文字动画特效
07-18
HTML5 Canvas粒子效果文字动画特效.HTML5 Canvas粒子效果文字动画特效
HTML5 canvas 3D烟花爆炸动画.zip
05-27
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接绘制图形，创建丰富的互动体验。...同时，这个案例也可以作为进阶者研究3D图形和粒子系统的起点，为未来开发更复杂的Web应用打下基础。
canvas 的粒子效果
zt_vicky的博客
03-04 693
* { margin: 0; padding: 0; } var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidt
Canvas之粒子动画
热门推荐
不忘初心，方得始终
12-25 1万+
首先添加一个canvas： canvas id="canvas">canvas>11 下面是样式： style> #canvas{ position: absolute; display: block; left:0; top:0; background: #0f0f0f; z-ind
使用canvas实现图像滤镜效果
"这篇教程主要关注HTML5的canvas元素，特别是如何使用...无论是简单的滤镜效果，还是复杂的图形动画，canvas都能提供足够的灵活性和性能支持。对于想要提升前端技能的开发者来说，深入理解和实践canvas是必不可少的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值