鼠标特效怎么设置(wallpaper怎么取消鼠标特效)

大家好，我是皮皮。

我们会在网页上看到很多粒子效果；如上图所示，这些都是借助HTML的新特性，使用新标签画布得到的效果；所以让我们来了解一下画布。

什么是 Canvas

在MDN中定义如下

& lt画布& gt是HTML5中的新元素，可以通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至实时视频处理或渲染。

这里需要强调的是< canvas & gt它只是一块画布，并不具备绘画的能力。画图必须使用JavaScript等脚本语言。

& lt画布& gt允许脚本语言动态呈现位图。& lt画布& gt标签创建一个可绘制区域，JavaScript代码可以通过类似于其他通用二维API的一整套绘制函数访问这个区域，从而生成动态图形。

我们可以这样想

Canvas 解决了什么问题?

在互联网出现的早期，Web 只不过是静态文本和链接的集合。1993 年，有人提出了 img 标签，它可以用来嵌入图像。在互联网的早期，网络只是静态文本和链接的集合。1993年有人提出img标签，可以用来嵌入图像。

随着互联网的快速发展，Web应用已经从Web文档发展到Web应用。但是图像总是静态的，人们越来越希望在自己的网站和应用中使用动态媒体(如音频、视频和交互式动画)，于是Flash出现了。

然而，随着Web应用的发展，HTML5出现了，其中浏览器中的媒体元素非常流行。包括新的音频和视频标签，可以直接将音频和视频资源放到Web上，无需其他第三方。

其次就是为了解决只能在 Web 页面中显示静态图片的问题，出现了 Canvas 标签。它是一个绘图表面，包含一组丰富的 JavaScript API，这些 API 使你能够动态创建和操作图像及动画。img 对静态图形内容起到了哪些作用，Canvas 就可能对可编写脚本的动态内容起到哪些作用。其次，为了解决网页上只能显示静态图片的问题，出现了Canvas label。它是一个绘图表面，包含一组丰富的JavaScript API，使您能够动态地创建和操作图像和动画。img对静态图形内容有什么影响，Canvas可能对可脚本化的动态内容有什么影响。

案例-鼠标滑动效果

了解了canvas之后，我们用新标签配合原生JS实现了一个简单的页面效果——鼠标滑动效果，如下图:

页面搭建

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& ltmeta name = & # 34视窗& # 34；内容= & # 34；宽度=设备宽度，初始比例= 1.0 & # 34；& gt& ltmeta http-equiv = & # 34；X-UA兼容& # 34；内容= & # 34；ie = edge & # 34& gt& lttitle & gt文档& lt/title & gt；& lt/head & gt；& ltbody & gt& lt画布id = & # 34我的画布& # 34；& gt& lt/canvas & gt；& lt/body & gt；& lt/html & gt；页面很简单，只需要一个简单的画布标签；

风格设置

* {边距:0；填充:0；}body {溢出:隐藏；} # my canvas { background-color:# 000；/* black */}逻辑交互初始化设置

var my canvas = document . getelementbyid(& # 39；我的画布& # 39；);var CTX = my canvas . get context(& # 34；2d & # 34);var starlist =[]；函数init() {//将画布区域的范围设置为整个页面my canvas . width = window . inner width；my canvas . height = window . inner height；};init()；班长

window . on resize = init；//侦听屏幕大小的变化，并将画布大小重新分配给移动事件。

//鼠标移动时，将鼠标坐标传入构造函数，创建一个对象my canvas . addevent listener(& # 39；鼠标移动& # 39；，function (e) {//将对象推入数组，画出的彩色点可以看作是记录在每个对象中的信息，然后存储在数组star list . push(new star(e . offsetx，e . offsety))；});随机函数

//随机函数封装，设置坐标函数random(min，max) {//并设置公式生成随机数返回math . floor((max-min)* math . random()+min)；};客体结构

//定义一个构造函数构造对象函数Star(x，y) {//存储对象中每个点的坐标this.x = xthis.y = y//设置随机偏移量this . VX =(math . random()-0.5)* 3；this . vy =(math . random()-0.5)* 3；this.color = & # 39RGB(& # 39；+ random(0，256)+& # 39；,'+ random(0，256)+& # 39；,'+ random(0，256)+& # 39；)'；this . a = 1；//初始透明度this . draw()；//将对象绘制到页面}方法封装

//Star对象原型上的封装方法//Star.prototype = {// canvas根据数组中存在的每个对象的点信息开始绘制:function(){ CTX . begin path()；CTX . fill style = this . color；//图像覆盖显示模式变亮将显示CTX上覆盖的颜色。GlobalComposite操作= & # 39；打火机& # 39；CTX . global alpha = this . a；ctx.arc(this.x，this.y，30，0，数学。PI * 2，假)；CTX . fill()；this . updata()；}，updata() {//根据偏移量this.x += this.vx更新每个点的位置；this . y+= this . vy；//透明度越来越小this . a* = 0.98；}}渲染

//渲染球到页面函数render() {//每次根据改变后的数组中的元素画圆，清空原来的内容区域CTX。ClearRect (0，0，Mycanvas.width，my canvas . height)//画一个圆Starlist.foreach (function (ele，I){//如果数组中有透明度低的对象，去掉效果给他看并逐渐消失如果(ele.a

小伙伴们，赶紧练起来吧！如果你在学习过程中遇到了什么问题，请加我为好友，我会拉你进Python学习交流群，一起讨论学习。