canvas简单动画案例（圆圈闪烁渐变动画）

最新推荐文章于 2023-03-09 11:08:50 发布
最新推荐文章于 2023-03-09 11:08:50 发布
阅读量2.9k 收藏 8
点赞数 2
分类专栏： ICY___的canvas入门 文章标签： canvas动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICY___/article/details/87888807
版权

canvas的第二篇博客，终于开始做动画了，不得不说，canvas是真的强，虽然写起来不是那么顺手，但是实现的东西真的让我很满意。

实现效果：

主要思想：随机画出圆圈，然后利用计时器动态重绘，实现圆圈的变化，动态移除；

代码如下，注释已写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            backgrou
最低0.47元/天 解锁文章
ICY___
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5闪光效果,HTML5 canvas元素背景梦幻小星星闪烁特效
weixin_42299150的博客
06-03 1280
这是一款使用HTML5 canvas制作的DOM元素背景梦幻小星星闪烁动画特效。该特效可以在任何HTML DOM元素上通过canvas来在鼠标滑过时制作星星闪烁的效果，可以为元素添加一些梦幻色彩。制作方法HTML结构可以是然后HTML DOM元素，但是如果是元素，必须使用一个对其进行包裹，否则没有效果。 CSS样式该DOM元素背景特效对CSS样式没有要求，你可以任意添加需要的CSS样式。如DEM...
HTML5 Canvas彩色渐变背景动画效果
06-11
这款基于HTML5 Canvas的彩色渐变背景动画效果，是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在画布上移动时，背景颜色会随着鼠标的移动而产生渐变变化，为用户提供了生动且引人入胜的交互体验。 首先...
H5 Canvas彩色圆圈旋转动画特效
06-24
H5 Canvas彩色圆圈旋转动画特效是一款基于css3 animation属性和SVG制作点击按钮圆形进度条加载动画特效。
Canvas 圆形渐变
实践求真知
04-12 5144
一 介绍 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下是设置Canvas圆形渐变的方法： createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，设置fi
canvas 实现星空闪烁的效果,鼠标滑动,连接周围的点
weixin_30458043的博客
09-14 157
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <canvas id="mycanvas"></canvas></b...
Openlayers利用原生Canvas绘制闪烁样式
Wilson的博客
03-07 2046
背景 项目需要地图上实现不断报警的闪烁样式，之前是通过Overlay来处理的，但Overlay遮挡要素，无法很好的触发事件，所以就转而使用Canvas原生实现。过程主要参考：openlayers4中闪烁点的实现、canvas-flashMarker-RunJS。 改造 原flashMarker的使用 原本的做法是通过构造新的对象new FlashMarker(map, citys)，每次构...
HTML5圆点粒子闪烁动画js特效
ICode联盟
02-07 350
下载地址 HTML5圆点粒子闪烁动画特效是一款基于HTML5 Canvas绘制的透明不规则的圆点粒子动画特效。 dd:
css hover 按钮,CSS之实现按钮hover时边框动态效果
weixin_31942999的博客
08-03 650
2019-11-10_13-25-16.gif在看书时，突然想到怎样来实现这样的一个效果，记得以前看过一篇文章说用四个div标签在按钮的四周就可以实现。于是自己动手做了一下。实现也很简单，主要就是用一个包含元素包含四个div和一个button元素，包含元素和button元素相同的宽高，另外四个div进行绝对定位。DELETE#buttonTry {width: 80px;height: 20px;...
圆圈滤镜泡泡动画Canvas特效
07-24
"圆圈滤镜泡泡动画Canvas特效"就是利用Canvas API创建的一种视觉效果，它通过JavaScript编程实现了一种动态的、不规则的圆圈泡泡动画，这些圆圈泡泡会在画布上逐渐变大然后消失，为网页增添了一种引人入胜的视觉体验...
Canvas碎纸屑闪烁动画特效.zip
07-11
代码片段： draw(t) {  var j, len, obj, ref;  this.ctx.save();  this.ctx.translate(this.w / 2, this.h / 2);  this.ctx.rotate(this.rot);  ref = this.objects;  for (j = 0, len = ref.... }
html5 canvas全屏酷炫星光闪烁3D视差背景动画特效
06-11
基于html5 canvas绘制的全屏酷炫星光闪烁3D视差背景动画特效，还有鼠标交互效果哦。
Canvas圆点灯光闪烁背景特效
06-24
Canvas圆点灯光闪烁背景特效是一款基于canvas 2D画布绘制彩色的圆点一个个随机闪烁发光背景动画特效。
H5 Canvas彩虹桥闪烁动画特效特效代码
03-20
H5 Canvas彩虹桥闪烁动画特效是一款html5基于canvas画布绘制彩虹桥星星闪闪彩虹桥矢量动画特效。
canvas中绘制矩形、圆、渐变效果
01-03
这是html5中canvas的一个综合的例子，同时还有canvas的鼠标单击事件的监听代码
必备的Canvas接口和动画效果大全
web前端开发
03-27 774
来源 |https://segmentfault.com/a/11900000219988751、概述<canvas>元素用于生成图像。它...
8种让人眼前一亮的hover效果--CSS
热门推荐
zukxu123的博客
09-01 1万+
8种好看实用的CSS悬浮效果，值得期待
html5 canvas全屏酷炫星光闪烁3D视差背景动画js特效
ICode联盟
03-09 362
基于html5 canvas绘制的全屏酷炫星光闪烁3D视差背景动画特效，还有鼠标交互效果哦。
HTML5-canvas动画闪烁分析
wanglexueshilengde的博客
01-08 4685
主要是setInterval驱动的不精准，该时钟无法跟浏览器重绘的频率同步而会导致时序问题。 关于FPS和浏览器重绘：浏览器保持一个帧频（通常为60fps）刷新画面，包括页面中的canvas；动画绘制过程如下：擦除canvas--计算所有元件的位置及颜色--逐个绘制所有元件到canvas中。该过程中，当擦除整个canvas后，浏览器到达重绘点时，canvas为空白，浏览器就会绘制空白的canva
html5 canvas全屏科幻粒子闪烁背景动画js特效
ICode联盟
03-04 499
基于html5 canvas绘制的一款全屏科幻粒子闪烁背景动画特效，密集小方块粒子闪烁动画效果，按下鼠标所有小方块会汇聚到页面中间成为一个小方块。
如何使用anim动画实现canvas里面文本闪烁的效果
最新发布
06-09
要在Canvas中实现文本闪烁效果，可以使用一个Anim动画对象。首先，在Canvas上绘制文本，然后使用Anim动画对象改变文本的透明度，从而实现闪烁效果。以下是实现文本闪烁效果的代码示例： ```javascript const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); let text = "Hello World!"; let fontSize = 50; let x = canvas.width / 2; let y = canvas.height / 2; ctx.font = `${fontSize}px Arial`; ctx.textAlign = "center"; ctx.fillText(text, x, y); // Create Anim object const anim = new Anim({ duration: 1000, update: (progress) => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = `${fontSize}px Arial`; ctx.textAlign = "center"; ctx.globalAlpha = progress; ctx.fillText(text, x, y); }, loop: true }); // Start Anim object anim.start(); ``` 在上面的代码中，我们使用 `ctx.globalAlpha` 属性改变文本的透明度，从而实现文本闪烁效果。Anim对象的 `duration` 属性表示动画的持续时间，`update` 属性是动画的更新回调函数，`loop` 属性表示是否循环播放动画。 我们可以根据需要调整文本的大小、位置、颜色等属性，来实现不同的文本闪烁效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值