部署DeepSeek模型,进群交流最in玩法!
立即加群
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >canvas中普通动效与粒子动效的实现

canvas中普通动效与粒子动效的实现

作者头像
用户2356368
发布于 2022-04-07 08:28:53
发布于 2022-04-07 08:28:53
2K00
代码可运行
举报
文章被收录于专栏:薄荷前端薄荷前端
运行总次数:0
代码可运行

canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。

canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分别采用普通动效与粒子特效实现了一个简单的时钟。

普通时钟

普通动效即利用canvas的api,实现有规则的图案、动画。

效果

该效果实现比较简单,主要分析一下刻度与指针角度偏移的实现。

绘制刻度

此例为小时刻度的绘制:表盘上共有12个小时,Math.PI为180°,每小时占据30°。 .save()表示保存canvas当前环境的状态,在此基础上进行绘制。绘制完成之后,返回之前保存过的路径状态和属性。

分钟刻度同理,改变角度与样式即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  // 小时时间刻度
  offscreenCanvasCtx.save();
  for (var i = 0; i < 12; i++) {
    offscreenCanvasCtx.beginPath();
    // 刻度颜色
    offscreenCanvasCtx.strokeStyle = '#fff';
    // 刻度宽度
    offscreenCanvasCtx.lineWidth = 3;
    // 每小时占据30°
    offscreenCanvasCtx.rotate(Math.PI / 6);
    // 开始绘制的位置
    offscreenCanvasCtx.lineTo(140, 0)
    // 结束绘制的位置;
    offscreenCanvasCtx.lineTo(120, 0);
    // 绘制路径
    offscreenCanvasCtx.stroke();
  }
  offscreenCanvasCtx.restore();

指针指向

以秒针为例:获取当前时间的秒数,并计算对应的偏移角度

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
  hr = hr > 12 ? hr - 12 : hr;
  
  //秒针
  offscreenCanvasCtx.save();
  offscreenCanvasCtx.rotate(sec * (Math.PI / 30));
  ......
  offscreenCanvasCtx.stroke();

粒子动效

canvas可以用来绘制复杂,不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。

粒子,指图像数据imageData中的每一个像素点,获取到每个像素点之后,添加属性或事件对区域内的粒子进行交互,达到动态效果。

效果

粒子获取

以下图的图片转化为例,该效果是先在canvas上渲染图片,然后获取文字所在区域的每个像素点。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  let image = new Image();
  image.src='../image/logo.png';
  let pixels=[]; //存储像素数据
  let imageData;
  image.width = 300;
  image.height = 300
  // 渲染图片,并获取该区域内像素信息
  image.onload=function(){
    ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height);
    imageData=ctx.getImageData((canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //获取图表像素信息
 //绘制图像
  };

像素信息

图片的大小为300*300,共有90000个像素,每个像素占4位,存放rgba数据。

粒子绘制

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  function getPixels(){
    var pos=0;
    var data=imageData.data; //RGBA的一维数组数据
    //源图像的高度和宽度为300px
    for(var i=1;i<=image.width;i++){
      for(var j=1;j<=image.height;j++){
        pos=[(i-1)*image.width+(j-1)]*4; //取得像素位置
        if(data[pos]>=0){
          var pixel={
            x:(canvas.width-image.width)/2+j+Math.random()*20, //重新设置每个像素的位置信息
            y:(canvas.height-image.height)/2+i+Math.random()*20, //重新设置每个像素的位置信息
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          }
          pixels.push(pixel);
        }
      }
    }
  }
  function drawPixels() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    var len = pixels.length, curr_pixel = null;
    for (var i = 0; i < len; i++) {
      curr_pixel = pixels[i];
      ctx.fillStyle = curr_pixel.fillStyle;
      ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);
    }
  }

粒子时钟

渲染文字时钟

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  function time() {
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ctx.font = "150px 黑体";
    ctx.textBaseline='top';
    ctx.fillStyle = "rgba(245,245,245,0.2)";
    ctx.fillText(new Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
  }

效果

获取粒子

文字转换粒子概念同上,获取选定区域的像素,根据筛选条件进行选择并存入数组。经过遍历后重新绘制。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  function getPixels(){
    let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
    let data = imgData.data
    pixelsArr = []
    for(let i=1;i<=textHeight;i++){
      for(let j=1;j<=textWidth;j++){
        pos=[(i-1)*textWidth+(j-1)]*4; //取得像素位置
        if(data[pos]>=0){
          var pixel={
            x:j+Math.random()*20, //重新设置每个像素的位置信息
            y:i+Math.random()*20, //重新设置每个像素的位置信息
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          };
          pixelsArr.push(pixel);
        }
      }
    }
  }

imgData保存了所选区域内的像素信息,每个像素点占据4位,保存了RGBA四位信息。筛选每个像素的第四位,这段代码中将所有透明度不为0的像素都保存到了数组pixelsArr中。

xy记载了该粒子的位置信息,为了产生效果图中的运动效果,给每个粒子添加了0-20个像素的偏移位置,每次重绘时,偏移位置随机生成,产生运动效果。

粒子重绘

获取粒子之后,需要清除画布中原有的文字,将获取到的粒子重新绘制到画布上去。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  function drawPixels() {
    // 清除画布内容,进行重绘
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (let i in pixelsArr) {
      ctx.fillStyle = pixelsArr[i].fillStyle;
      let r = Math.random()*4
      ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r);
    }
  }

粒子重绘时的样式为筛选像素时原本的颜色与透明度,并且每个在画布上绘制每个粒子时,定义大小参数r,r取值为0-4中随机的数字。最终生成的粒子大小随机。

实时刷新

获取粒子并成功重绘之后,需要页面实时刷新时间。这里采用window.requestAnimationFrame(callback)方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  function time() {
    ......
    getpixels(); //获取粒子
    drawPixels(); // 重绘粒子
    requestAnimationFrame(time);
  }

window.requestAnimationFrame(callback) 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。

该方法不需要设置时间间隔,调用频率采用系统时间间隔(1s)。

文档解释戳这里

效果

总结

本文主要通过两种不同的方式实现了时钟的动态效果,其中粒子时钟具有更多的可操作性。在以后的canvas系列中会针对粒子系统实现更多的动态效果。

广而告之

本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/12/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
制作高大上的Canvas粒子动画
制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): 或者这样(粒子轨迹动画): 甚至是这样
练小习
2017/12/29
2.6K0
Canvas <粒子文字效果>
若你不在画布上做任何操作,那么当你输出 data 时为。所以加上 data[i] !== 0 (rgb(0, 0, 0) 为黑色,只要你绘制的东西不是这个色值,肯定会出现不等于0的像素模块,因此就能确定出你作画的位置坐标)
网罗开发
2021/04/07
1.2K0
Canvas <粒子文字效果>
HTML5 Canvas API详解
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现,等等。本文主要关注图形方面的增强:canvas。 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成,但在新兴的支持中,canvas 已经可以在几乎所有现代浏览器上良好运行了,但 Windows® Internet Explorer® 除外。幸运的是,一个解决方案已经出现,将 Internet Explorer 也包含进来。 本质上,canvas 元素是一个白板,直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同,您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画,这不是使用画笔和油彩所能够实现的。
业余草
2019/01/21
2.1K0
打造高大上的Canvas粒子动画
首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样: 或者是这样: 甚至是这样: 很酷炫! 那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。 技术
腾讯ISUX
2018/06/29
3K0
你还在用canvas画爱心吗?看我让你的名字在星空绽放
通过ctx.font设定字体的大小以及字体,再填充颜色,最后通过ctx.fillText绘制到画布当中,这里有几个需要注意的地方:
小丞同学
2021/08/16
5240
震惊,canvas文字粒子效果,只需要100行代码,简单易懂。
1.了解一下基本的canvas的Api,像画点,画圆,以及填充颜色等等。2.文字打碎,记录每个文字所在画布中的位置,本文的重点。3.生成随机粒子,并且设置每个粒子的运动轨迹。4.移动到步骤二记录下来位置。5.使用requestAnimationFrame来绘制每一帧的画布
苏南
2020/12/16
1.2K0
震惊,canvas文字粒子效果,只需要100行代码,简单易懂。
【Go 语言社区】HTML5 canvas验证码识别
canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。Firefox 1
李海彬
2018/03/19
1.8K0
掘金五边形「战士」
看过我之前文章 - 天幕:六边形特效 的读者可能比较好理解。之前,我们绘制的是六边形:
Jimmy_is_jimmy
2023/09/01
4150
掘金五边形「战士」
Canvas基础-粒子动画Part1
网页上各种酷炫的粒子动画看的人眼花缭乱,实际上原理却非常简单。 获取像素信息 首先我们需要画张图到Canvas上,这里因为我懒的扣图(实际上是不会),就找了张jpeg的白底图片。实际上用png的透
Bob.Chen
2018/05/02
1.1K0
Canvas基础-粒子动画Part1
HTML5 canvas 粒子特效显示图像/文字
本次实例将图片或文字分解成粒子。是先将图片或者文字画在canvas上,然后通过画布对象的getImageData获取到画布上的所有像素点,也就是imageData对象的data数组,存放着画布的所有像素的rgba值。
用户5997198
2019/08/09
6.3K0
HTML5 canvas 粒子特效显示图像/文字
【高级系列】Canvas绘制性能专题
        在移动APP中,因为手机硬件性能有限,其实不宜做太多特效,应该往简洁突出重点的方向考虑。
江中散人_Jun
2023/10/16
6260
【高级系列】Canvas绘制性能专题
Canvas 进阶(五)实现图片滤镜效果
之前看过一篇写关于图片滤镜的文章,蛮有兴趣,因此作出了这个小 DEMO,可以切换多种图片滤镜并提供图片下载功能。
小皮咖
2020/01/03
3.2K0
HTML5(六)——Canvas 高级操作
angle 旋转弧度,如果想使用角度,可以把角度转成弧度,公式为:deg * Path.PI/180。
呆呆
2021/09/29
1.4K0
Canvas 烟花合集 -- 将粉丝头像做成烟花在天空绽放✨
这一步的目的是获取到图片每个像素的颜色,这样我们就可以通过这些像素点合成一张图片,也可以排除掉一些像素点,筛出想要的图形
小丞同学
2021/08/16
1.4K0
❤️创意网页:HTML5,canvas创作科技感粒子特效(科技感粒子、js鼠标跟随、粒子连线)
首先,我们来看一下HTML结构。代码中只有一个<canvas>元素,这是我们用来绘制粒子特效的画布。我们也可以通过给<canvas>元素设置背景图片来增加更多的效果。
命运之光
2024/03/20
2.5K0
❤️创意网页:HTML5,canvas创作科技感粒子特效(科技感粒子、js鼠标跟随、粒子连线)
前端canvas基础复习,canvas学习笔记,持续记录
最开始学html5的时候,曾特意了解过canvas,还记得当时为了搞明白canvas的api,绞尽脑汁了很多个日日夜夜。
房东的狗丶
2023/02/17
2.7K0
前端canvas基础复习,canvas学习笔记,持续记录
【基础系列】Canvas专题
        为了在canvas上绘制,你必须先得到一个画布上下文对象的引用,用本方法即可完成这一操作,格式如下:
江中散人_Jun
2023/10/16
4580
【基础系列】Canvas专题
Canvas之鼠标滑动特效
我们会看到很多网页的粒子特效;如上图所示,这些都是借助HTML新特性,使用新增标签Canvas得到的效果;那么我们来了解下canvas。
前端皮皮
2022/08/17
2.1K0
Canvas之鼠标滑动特效
使用canvas绘制渐变色矩形和使用按键控制人物移动
使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 image.png 相关代码: <!DOCTYPE html> <html lang="en"> <
Dream城堡
2018/10/09
1.1K0
使用canvas绘制渐变色矩形和使用按键控制人物移动
OpenHarmony 实战开发——ArkUI之Canvas组件
Canvas 是 ArkUI 开发框架里的画布组件,常用于自定义绘制图形。因为其轻量、灵活、高效等优点,被广泛应用于 UI 界面开发中。本期,我们将为大家介绍 ArkUI 开发框架中 canvas 组件的使用。
小帅聊鸿蒙
2025/04/10
1090
OpenHarmony 实战开发——ArkUI之Canvas组件
推荐阅读
相关推荐
制作高大上的Canvas粒子动画
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验