请问QQ个性标签这样的效果要怎么通过js或者canvas实现？

lyckkb520m 2019-12-05 09:59:10

请问这种根据标签生成的效果要怎么实现啊？标签重复撑满整个div，文字逐渐变小。

...全文

214 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

该个人网站一共有8个页面。首先博客的登录界面login.html:是利用html5和css3结合写出的一个超炫酷的页面，根据canvas粒子制作出背景具有动态的效果。登陆后根据存入数据进行比对，对其用户名、密码、验证码验证，只有通过验证后才能登录成功并且验证成功后可以达到全屏的效果。每一个页面分为footer body和footer三部分组成。头部主要就是标题栏，尾部是页脚，中间就是主题内容。index.html主页：主要就利用js焦点滚动式轮播插入图片和文字自行进行翻页，其他主要利用div和css进行控制每一个内容框。利用链接跳转到相对应的内容上。可以根据标题、标签、关键字等点击到另一个内容，图片和文字进行有个布局达到图文环绕的布局。再然后，就是关于about.html页面：博主简介利用jquery焦点缩略图轮播滚动类似选项卡滑动切换。可以自动展现不同的图片。其次，是成长页面about.html：是博主对未来的美好未来的期待，利用bootstrap响应式布局进行布局，图片和文章不同布局相结合，是整体更协调。再其次，是娱乐fun.html页面，利用CSS3 transform当鼠标悬停到照片上时，图片具有放大特效，主要利用css3中scale()和rotate()进行旋转和缩放。接下来是说说moodlist.html：个人心情页面，博主可以发一些类似于微信或qq心情说说，具有时间年轮的效果，当鼠标放上某一个时具有高亮的效果。最后是留言comment.html页面，可以通过给博主留言。给博主一些意见，该留言可以有表情添加，留言框带有头像。

提供了许多可自定义的选项，如纸屑颜色、形状、数量、速度、角度、发射器位置等，可以轻松实现不同的纸屑效果。实现的签名库，用于绘制签名。全端全平台支持，开箱即用，支持PC、H5、小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东）、Vue、Taro等更多支持canvas的框架，体积小巧、调用简单方便、性能及体验极佳。自由绘制和对象管理：提供了自由绘制、文本框、箭头、线段、矩形、椭圆、图标等多种基本对象，并支持对这些对象进行移动、复制、旋转、缩放、对齐等操作，帮助用户实现更为精细的设计。

掌握canvas基本用法; 掌握手势解锁实现原理; 得到注释详尽的源码; 掌握canvas的学习方法

不少的项目中都用到了二维码加背景图片生成海报的宣传图片，实现方法就是canvas绘制到一张上后进行下载。html2canvas的技巧在这里不在讲解。二维码和背景图片进行定位。在传统场合，这类功能往往依赖后台合成图片，或依赖端上实现，但web侧本身也有独立的解决方案。 Web中具有图片生成功能的是canvas标签，我们可以使用canvas中的toDataUrl() API，得到当前画布内...

基本概览 Canvas是HTML5中新增的新标签，提供了一套强大的使用JavaScript绘制画布的API。简要概括Canvas功能，主要包括：形状绘制，包括线条及其组成的其他形状；而绘制又分为Fill和Stroke两种形式，前者填充整个形状，后者只绘制边框；文本绘制，往往同时需要对其Style进行设置；图片绘制，一方面对图像进行裁剪缩放等处理，另外也可以通过对修改图片

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章