![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
页面特效
文章平均质量分 70
DB_鸠
Barry,gogogo!草莓,gogogo!
展开
-
Canvas绘图
随着前端的不断发展,页面特效越来越炫酷,W3C组织也不断退出新的CSS特性:例如各种渐变,瀑布流布局,各种阴影,但是随着需求越来越花哨,W3C表示:我去你妈的,你自己画去吧。于是浏览器就暴露出了Canvas API让用户自己实现各种炫酷的效果。学习过浏览器的渲染过程,我们可以知道其实浏览器的窗口本身就是一个画布,他根据DOM和CSSOM不断得生成绘制指令来重绘页面。Canvas其实就是浏览器将绘制指令封装成API给用户进行调用,这也是为什么Canvas的性能要比直接操作DOM的性能更高的原因。原创 2023-10-06 18:04:39 · 292 阅读 · 0 评论 -
【前端基础】函数式排列
浏览器默认的坐标系,是以左上角为原点,向右为x轴,向下为y轴。这个坐标系与数学中使用的坐标系不符,为了更方便使用函数来描述页面的布局,需要使用css来对浏览器的坐标系进行变换。下面的css自定义了--x和--y两个自定义属性,通过clac动态计算的方式,实现了以正中心为原点,向右为x轴,向上为y轴的坐标系。通过--x和--y两个属性来指定坐标。原创 2023-07-19 22:43:56 · 271 阅读 · 0 评论 -
Pixi + Tone 实现简单midi音频可视化
这个currentMidi中存储了midi文件的音轨,音符,乐器等信息。在页面中添加一个按钮并绑定事件,用于播放音频,下面这段代码里有用到Tonejs创建合成器播放声音的代码。有没有懂设计模式的,可以帮我优化下代码嘛,定义了一个全局变量currentMidi总觉得不舒服。首先需要讲midi文件导入紧浏览器,由于浏览器的安全限制,我们只能使用文件选择器讲文件导入。为了尽可能得跟音频同步减小延时,我们使用Tonejs的音频调度。到这里就可以实现MIDI文件的播放了。我们使用灯管类作为每一个音符的可视化。原创 2023-07-14 17:07:03 · 1609 阅读 · 0 评论 -
hexo + github 创建个人博客网站
hexo 是一个静态博客生成网站,可以快速制作自己的博客网站并部署。默认的hexo页面比较难看,我用了一个明日方舟风格的主题来进行美化。创建一个名为[用户名].github.io的仓库。就可以新建一个md文件,对这个文件进行编辑。原创 2023-05-12 20:57:40 · 662 阅读 · 1 评论 -
大二网页制作实习总结
第一天讨论确定下要做的内容,打算制作传统节日相关的。因为需要分工合作,使用的工具也都不同,所以不能使用脚手架和webpack来工程化开发。搭建的目录结构如下:每个文件夹内留出一个index.html与其他模块进行链接,我负责制作中秋模块。原创 2022-09-19 09:05:03 · 26317 阅读 · 12 评论 -
html-canvas
一、canvas基本概念1 创建canvas标签,在标签内设置宽度和高度。不支持canvas的浏览器会显示写在canvas内部的内容<canvas id="canvas" width="600px" height="400px"> 浏览器不支持显示我 </canvas>注意:canvas和img不同,没有src和alt属性 canvas的高度为150px,宽度为300px 不要在css中设置canvas的宽高,这样会导致绘图变形 如果想要让ca原创 2022-04-12 14:34:30 · 1928 阅读 · 0 评论 -
放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放大.原创 2022-02-15 17:47:59 · 238 阅读 · 0 评论