（一行代码）前端页面使用canvas画出动态背景

原创已于 2022-02-24 11:36:25 修改 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

于 2021-02-04 14:52:47 首次发布

本文介绍了一种使用HTML5 Canvas API来实现动态背景效果的方法。通过引入特定的JavaScript文件，可以轻松地为网页添加美观且吸引人的动态粒子背景。文中提供了两种引入方式：稳定版本与远程版本。

前端页面使用canvas画出动态背景

我们只需要在html`<body>`标签内引入以下代码

稳定版本

<script type="text/javascript" src="http://xujiangtao.icu:81/xjtfile/lizi.js"></script>

远程

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

效果如下：
在这里插入图片描述

在线体验

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

languageStudents

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

按住 Ctrl 测距？我用纯前端实现了canvas在线MarkMan智能测距小工具 (文末附完整代码)

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

04-13

458

最近在做一个组件展示页面，设计那边经常甩过来个图，要我“对齐一下这个按钮”和“看看这个卡片宽多少”，MarkMan 虽然好用，但不能直接嵌在网页里看效果，看了一圈都没有类似的网站可以实现的。所以我干脆自己撸了一个简版“MarkMan 测距功能”，纯前端搞定，按住 Ctrl 就能显示距离，效果不要太爽！今天就来分享下我是怎么做的。只要上传一张截图，按住 Ctrl 在 Canvas 上随便移动，系统会自动识别当前区域颜色的边界，然后绘制出测量框，标出宽高。✅ 支持色差容忍度调节（低容忍度精准、高容忍度适合渐变背

利用Canvas画布实现动态背景

水瓶KaKei的博客

12-18

4112

引言在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Canvas技术来创建一个简单动态背景效果。通过代码示例，你将学习如何编写和利用Canvas绘制动态场景，从而实现一个独特而吸引人的背景效果。

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

water___Wang 2021.02.25
厉害了~

前端实现给文字添加动态背景

阿牛的博客

10-31

2564

今天依旧更新一个前端有趣小案例，给文字添加动态背景，这篇博客我将用两种方式来实现这个效果！

canvas 实现动态背景图

HurryUpp的博客

07-27

934

【代码】canvas 实现动态背景图。

用Canvas为网页添加动态背景

06-25

1万+

随着浏览器对HTML5的支持越来越好，尤其是移动浏览器，用canvas做动画将不再是问题。虽然CSS3的transform属性已经很强大，但是在canvas面前也只能是小儿科。今天就用canvas画一些好玩的。

[Canvas]动态背景

weixin_30300523的博客

03-04

202

欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例：代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> ...

【前端】Canvas画布实现在线的唇膏换色功能

欧阳天涵的专栏

03-22

1061

在我们的网站上销售美容产品，必须要帮助客户从种类中选择正确产品。对于美容产品来说，用户通过屏幕上的图片做出正确的选择至关重要。例如，用户可能想知道某款唇色涂抹在特定肤色上会是什么样子。解决这个问题有多种方法。我们可以为每种唇色准备一张图片，并在用户浏览色板时更换图片。这种方法可行，但会影响网站性能。更快的页面意味着更好的用户体验。每次为数百种颜色变体加载图片会在低带宽网络上造成不必要的延迟，从而影响用户体验。

炫酷多彩的粒子效果——canvas实现前端页面背景点缀

ice_teas的博客

06-03

872

想直接感受动态效果的可以直接访问我的个人主页：http://bingchacha.top/ 这里就直接上图吧~ 如果想使用的话非常简单，加载我写好的js文件引入就行了，具体代码和操作可以访问项目的github，readme文档我都写得非常清晰了：https://github.com/Chacha-Bing/rainbow-particles 瞅一眼可配置项： new Rainbow({ max_age : 粒子可达的最长寿命，也就是粒子的最大历程，此值越大，粒子的平均路径越长, .

前端canvas水印快速制作（附完整代码)

01-19

这里我只简略分析图一斜纹类，事实上这两种方式都较为简单，不需要特别强的canvas基础，只需大概了解就行，直接上完整代码吧图一 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8&...

使用canvas做动态背景

VoidDevil

06-11

4444

参考自：https://blog.youkuaiyun.com/kiddd_fu/article/details/78399629在自己写网页的时候用了一个动态canvas作动态背景原本一直显示有问题，后来发现必须得把script的引用放在最后面，不然无法使用。得纠正错误习惯。...

HTML5动态背景登录页面前端模板54r.zip

08-29

HTML5动态背景登录页面前端模板54r.zip漂亮的前端后台静态代码，适合选用二次开发，bootstrap结构，自适应手机电脑，非常棒的代码。

Canvas酷炫全屏动态背景动画特效

06-12

Canvas鼠标经过碎片高亮变化特效是一款酷炫的全屏星星闪烁星空动态背景动画特效。

Canvas酷炫全屏动态背景动画特效.zip

07-05

Canvas鼠标经过碎片高亮变化特效是一款酷炫的全屏星星闪烁星空动态背景动画特效。

【HTML】动态背景效果前端页面