canvas学习笔记03：简单脉冲效果

最新推荐文章于 2022-12-01 16:34:51 发布
最新推荐文章于 2022-12-01 16:34:51 发布
阅读量188 收藏
点赞数
原文链接：http://www.cnblogs.com/zhuzf/p/3582015.html
版权

 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <canvas id="c" width="1000" height="600"></canvas> <script> (function (w) { w['raf'] = w['requestAnimationFrame'] || w['webkit'+r] || w['moz'+r] || w['ms'+r] || w['o'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; function Fx (size,color,cxt){ this.size = size; this.color = color; this.cxt = cxt; this.angle = 0; this.speed = 0.09; this.run(); }; Fx.prototype = { 'run' : function (){ var that = this, c = this.cxt, size = this.size + Math.abs(Math.sin(this.angle))*this.size , txt = '♥' , r = 5/3; c.clearRect(0,0,1000,600); c.save(); c.beginPath(); c.font= size+'px Georgia'; c.fillStyle = this.color; c.fillText(txt,500 - c.measureText(txt).width/2,300 ); c.fill(); c.restore(); this.angle += this.speed; raf(function (){ that.run.call(that);}); } }; w['Fx'] = Fx; }(window)); new Fx(50,'red',document.getElementById('c').getContext('2d')); </script> </body> </html>

运行代码

转载于:https://www.cnblogs.com/zhuzf/p/3582015.html

weixin_30437481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas实现炫酷粒子效果以及流星效果
BOOLTechnology的博客
01-30 750
canvas实现炫酷粒子效果以及流星效果
Canvas彩色发光3D线条动画特效
07-24
Canvas彩色发光3D线条动画特效是一款基于HTML5 Canvas绘制的全屏彩色网状线条发光酷炫动画特效。
html5画布直线运动,《每周一点canvas动画》——波形运动
weixin_31159439的博客
06-01 315
在上一节我们介绍了canvas动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括：平滑运动线性运动脉冲运动1.Sin函数的波形sin函数的波形想必骚年们不会感到陌生，其图形如下所示：如果想要取得sin函数在[0, 2π]之间的值，非连续的情况下，可以这样估算。for(var angle=0; angleconsole.log(Math.sin(angl...
mineMap 水波动效椭圆定位点实现
jinse29的博客
09-09 588
目录 1.定义一个CustomLayerInterface来在地图上绘制脉冲点 2.在图层添加到地图时获取获取canvas context 3.每帧渲染时调用 4.处理数据，叠加图层 ​5.代码如下 6.画椭圆的函数 先放一张图，效果如下，本文主要写橙色定位点下面的水波纹效果的实现，其原理就是利用canvas在地图上叠加一级图层。 1.定义一个CustomLayerInterface来在地图上绘制脉冲点 2.在图层添加到地图时获取获取canvas context 3...
java canvas 动画效果_16个超牛逼的HTML5和JavaScript特效
weixin_42405980的博客
03-04 581
不用说，Flash的效果大家都清楚。实际上，HTML5和Java拥有很多新属性，可以用它们来替代Flash。W3Cschool精选16个超牛逼的HTML5和Java特效，看了这些特效，未来的Web发展前途无量。1.特效：FlowerPower创作者使用花朵作为画刷，以贝兹曲线方式绘图。2.特效：Breathing Galaxies动态变换直径及颜色，可通过鼠标或键盘产生新形状，这个效果不错!3.特...
html5 电流效果,在HTML5 Canvas 2D上绘制云雾中的电流动画特效
weixin_35160923的博客
06-10 562
JavaScript语言：JaveScriptBabelCoffeeScript确定ctrl = {numParticles: 35,maxRadius: 80,hue: 220,hueRange: 15,fade: 0.36,halo: true,zappy: true,zapComplexity: 1}var gui = new dat.GUI();gui.add(ctrl, 'numPart...
html canvas直线进度条,HTML5 canvas粒子飞射的loading进度条特效
weixin_39693971的博客
05-31 258
这是一款使用HTML5 canvas制作的效果非常酷的loading进度条特效。该loading进度条在动画的时候会有粒子从进度条头部不断的飞射出来，并且进度条的颜色还会随机改变，非常有创意。制作方法HTML结构这个loading进度条使用一个空的canvas来制作。JAVASCRIPTprogressbar()函数用于绘制进度条，particle()函数用于绘制粒子。在draw()方法中判断当前...
php动态 轨迹连线,Canvas实现动态粒子连线效果（附代码）
weixin_33374585的博客
03-11 336
本篇文章给大家通过示例来介绍一下JS+Canvas制作动画，实现动态粒子连线效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。JS+Canvas制作动画，实现动态粒子连线效果效果图如下思路如下：绘制随机区域的粒子，记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离通过定时函数使得粒子进行移动，移动后判断是否超过界限，超过则将该粒子删除并生成一个新的粒子判断所有粒子之间...
html5的canvas动画效果,HTML5 Canvas：制作动画特效
weixin_42500789的博客
06-03 2031
要在HTML5 canvas中绘制图像动画效果，你需要绘制出每一帧的图像，然后在一个极短的时间内从一帧过渡到下一帧，形成动画效果。这其实是一种视觉欺骗，原理就像播放电影一样，胶片上每一格是一帧图片，然后快速的播放它们，在人的眼睛看来就是一个完整的动画效果。制作canvas动画的基本步骤下面是你在canvas上绘制一个动画帧的基本步骤：1、清空canvas：除了背景图像之外，你需要清空之前绘制的所有...
Canvas实现Pulse的效果
o_OzZZ的博客
12-01 149
Canvas实现Pulse的效果
canvas学习笔记之绘制简单路径
01-21
1 线段（直线路径） 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 ...
canvas学习笔记之2d画布基础的实现
01-21
Canvas是啥 < canvas> 是一个可以使用脚本（通常是js）来绘图的HTML元素 < canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Explorer ...
html5中canvas学习笔记2-判断浏览器是否支持canvas
11-21
判断浏览器是否支持canvas，具体代码如下： 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
canvas学习之API整理笔记（一）
01-19
其实canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。但是canvas的API实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很...
前端canvas实现粒子效果(一): 初始化粒子并移动起来
qq_39246667的博客
05-05 1097
canvas画布实现粒子效果
canvas系列教程05 ——交互、动画
朝阳39的博客
04-25 2214
交互 实时获取鼠标在Canvas中的坐标 //将tools定义为window对象的属性，该属性的值是一个对象 window.tools = {}; //获取鼠标位置 window.tools.getMouse = function (element) { //定义一个mouse的对象 var mouse = { x: 0, y: 0 }; //为传入的元素添加mousemove事件 addEvent(element, "mousemove", function (e) { .
《每周一点canvas动画》——波形运动
weixin_33812433的博客
04-17 272
在上一节我们介绍了canvas动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括： 平滑运动 线性运动 脉冲运动 1.Sin函数的波形 sin函数的波形想必骚年们不会感到陌生，其图形如下所示： 如果想要取得sin函数在[0, 2π]之间的值，非连续的情况下，可以这样估算。 for...
利用放射渐变制作简单的能量脉冲效果。
SittingAtThisMoment的博客
05-04 1151
偶尔看到冲击波的效果，突然想UE4里面怎么实现。最后想到RadialGradient（反射渐变&amp;圆形渐变）这个节点可能符合要求。鼓捣了下大概弄出了这样的结果:   其大体思路是制作出一个移动的圆环遮罩，实现之后。可以干很多事情，比如加上马赛克效果：将值连入位置偏移效果略显鬼畜当然还可以搭配透明或者溶解效果，实现物体炫酷登场的感觉，大家可以一一尝试，就不多说了。下面是完整材质和分析完整材质节...
基于Canvas的动画基本原理与数理分析
weixin_33725126的博客
12-15 319
什么是动画？ 就像思考哲学问题无法回避思维和存在的关系一样，制作动画同样无法逃避的问题是动画的原理是什么？这里提一句题外话，任何原理的东西通常难以让你短期拾掇成果，但在隐约的未来会起到难以置信的效果，不信就看接下来小羊的一些学习成果分享。 动画本质上是图像按照事先设定好的顺序在一定的时间内的图像序列变化运动。这种图像序列的变化运动给我们...
canvas红包雨学习笔记
最新发布
05-13
Canvas红包雨是一种基于HTML5 Canvas技术开发的节日效果，通过JavaScript控制红包的下落和动画效果，实现一个红包雨的动态效果。 下面是Canvas红包雨的开发流程： 1. HTML页面中添加Canvas画布，并设置画布的宽高和样式。 ```html <canvas id="canvas"></canvas> ``` ```css #canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } ``` 2. 在JavaScript中获取Canvas画布对象，并设置画布的宽高。 ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ``` 3. 定义红包对象，包括红包的位置、速度、大小和颜色等属性。 ```javascript function RedPacket(x, y, vx, vy, size, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.color = color; } ``` 4. 在Canvas画布上绘制红包，并实现红包的下落和动画效果。 ```javascript var redPackets = []; // 存储红包对象的数组 function drawRedPacket(redPacket) { ctx.beginPath(); ctx.arc(redPacket.x, redPacket.y, redPacket.size, 0, 2 * Math.PI); ctx.fillStyle = redPacket.color; ctx.fill(); } function updateRedPacket(redPacket) { redPacket.x += redPacket.vx; redPacket.y += redPacket.vy; redPacket.vy += gravity; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < redPackets.length; i++) { drawRedPacket(redPackets[i]); updateRedPacket(redPackets[i]); } requestAnimationFrame(animate); } requestAnimationFrame(animate); ``` 5. 实现红包的自动生成和动态效果，可以通过setInterval或setTimeout定时调用生成红包的函数。 ```javascript function createRedPacket() { var x = Math.random() * canvas.width; var y = -20; var vx = Math.random() * 6 - 3; var vy = Math.random() * 2 + 2; var size = Math.random() * 10 + 10; var color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机生成颜色 var redPacket = new RedPacket(x, y, vx, vy, size, color); redPackets.push(redPacket); } setInterval(createRedPacket, 500); // 每500ms生成一个红包 ``` 6. 实现红包的点击事件，当用户点击红包时，可以实现红包爆炸效果，并显示红包金额或祝福语。 ```javascript function explodeRedPacket(redPacket) { var particles = []; // 存储爆炸粒子的数组 for (var i = 0; i < 20; i++) { var particle = { x: redPacket.x, y: redPacket.y, vx: Math.random() * 6 - 3, vy: Math.random() * 6 - 3, size: Math.random() * 3 + 1, color: redPacket.color }; particles.push(particle); } for (var i = 0; i < particles.length; i++) { drawRedPacket(particles[i]); } } canvas.addEventListener('click', function(event) { var x = event.clientX; var y = event.clientY; for (var i = 0; i < redPackets.length; i++) { var redPacket = redPackets[i]; if (x > redPacket.x - redPacket.size && x < redPacket.x + redPacket.size && y > redPacket.y - redPacket.size && y < redPacket.y + redPacket.size) { explodeRedPacket(redPacket); redPackets.splice(i, 1); break; } } }); ``` 上述就是Canvas红包雨的开发流程，通过Canvas技术和JavaScript实现红包的下落、动画、自动生成和点击事件等效果，可以增加网站的趣味性和用户互动性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值