整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Canvas之鼠标滑动特效

家好,我是皮皮。

我们会看到很多网页的粒子特效;如上图所示,这些都是借助HTML新特性,使用新增标签Canvas得到的效果;那么我们来了解下canvas。

什么是 Canvas

在 MDN 中是这样定义 <canvas> 的:

<canvas> 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时视频处理或渲染。

这里需要划重点的是,<canvas> 只是一个画布,本身并不具有绘图的能力,绘图必须使用 JavaScript 等脚本语言。

<canvas> 标签允许脚本语言动态渲染位图像。<canvas> 标签创建出了一个可绘制区域,JavaScript 代码可以通过一套完整的绘图功能类似于其他通用二维的 API 访问该区域,从而生成动态的图形。

我们可以认为 <canvas> 标签只是一个矩形的画布。JavaScript 就是画笔,负责在画布上画画。

Canvas 解决了什么问题?

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

由于互联网的发展越来越迅猛,Web 应用已经从 Web 文档发展到 Web 应用程序。但是图像一直是静态的,人们越来越希望在其网站和应用程序中使用动态媒体(如音频、视频和交互式动画等),于是 Flash 就出现了。

但是随着 Web 应用的发展,出现了 HTML5,在 HTML5 中,浏览器中的媒体元素大受青睐。包括出现新的 AudioVideo 标签,可以直接将音频和视频资源放在 Web 上,而不需要其他第三方。

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

案例-鼠标滑动效果

了解了canvas之后,我们使用新标签搭配原生JS,实现一个简单的页面特效 ------ 鼠标滑动效果,如下所示:

页面搭建

<!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>
</head>

<body>
    <canvas id="myCanvas"></canvas>
</body>

</html>

页面非常简单,只需要一个简单的canvas标签即可;

样式设置

* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
}

#myCanvas {
    background-color: #000; /* 黑色 */
}

逻辑交互

初始化设置

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
var starlist = [];
function init() {
    // 设置canvas区域的范围为整个页面
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
};
init();

监听

window.onresize = init; // 监听屏幕大小改变 重新为canvas大小赋值

移动事件

// 当鼠标移动时 将鼠标坐标传入构造函数 同时创建一个对象
myCanvas.addEventListener('mousemove', function (e) {
    // 将对象push到数组中,画出来的彩色小点可以看作每一个对象中记录着信息 然后存在数组中
    starlist.push(new Star(e.offsetX, e.offsetY));
});

随机函数

// 随机函数封装,设置坐标
function random(min, max) {
    // 设置生成随机数公式
    return Math.floor((max - min) * Math.random() + min);
};

对象构造

// 定义了一个构造函数进行对象构造
function Star(x, y) {
    // 将坐标存在每一个点的对象中
    this.x = x;
    this.y = y;
    // 设置随机偏移量
    this.vx = (Math.random() - 0.5) * 3;
    this.vy = (Math.random() - 0.5) * 3;
    this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
    this.a = 1; // 初始透明度
    this.draw(); // 把对象绘制到页面
}

方法封装

//star对象原型上封装方法
Star.prototype = {
    // canvas根据数组中存在的每一个对象的小点信息开始画
    draw: function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        // 图像覆盖  显示方式 lighter 会将覆盖部分的颜色重叠显示出来
        ctx.globalCompositeOperation = 'lighter'
        ctx.globalAlpha = this.a;
        ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
        ctx.fill();
        this.updata();
    },
    updata() {
        // 根据偏移量更新每一个小点的位置
        this.x += this.vx;
        this.y += this.vy;
        // 透明度越来越小
        this.a *= 0.98;
    }
}

渲染

// 将小球渲染到页面上
function render() {
    // 每一次根据改变后数组中的元素进行画圆圈  把原来的内容区域清除掉
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)

    // 根据存在数组中的每一位对象中的信息画圆
    starlist.forEach(function (ele, i) {
        ele.draw();
        // 如果数组中存在透明度小的对象 ,给他去掉 效果展示逐渐消失
        if (ele.a < 0.05) {
            starlist.splice(i, 1);
        }
    });
    requestAnimationFrame(render);
}
render();

总结

本文我们首先了解了粒子特效,它大多数是HTML的新特性,使用canvas标签创建出来的,或者说是绘制吧,canvas是画布,但是还需要搭配js来构造动态效果,创建出好看的特效。总而言之,canvas的出现使得前端页面变得更加丰富多彩,提高了视觉效果,对于用户体验进行了适当的增强,感兴趣的小伙伴可以去尝试下,鼠标滑动效果特效。

小伙伴们,快快用实践一下吧!如果在学习过程中,有遇到任何问题,欢迎加我好友,我拉你进Python学习交流群共同探讨学习。

源:太平洋电脑网

最近,关于Flash死亡的话题又再次引起了热议。早前Flash Player的东家Adobe就已经确认,将会在2020年12月31日彻底停止支持Flash Player,Flash Player迎来生命终点(EOL)。Adobe在其官网上确认,Flash Player将不再获得任何包括安全更新在内的技术支持,用户应该在EOL日期之前卸载Flash。

Flash将停止运营,但中国特供版除外?

然而,Adobe同时在新浪微博上表示,Adobe将会继续与重橙网络合作并支持其在中国大陆地区对Flash Player的独家发行与维护,该合作仅限中国大陆地区。换言之,Flash Player特别为中国制作了一个“特供版”,这到底是个怎么样的存在?值不值得继续使用?今天就来谈谈吧。

Flash Player为何要迎来终结?

作为曾经网络上的大红人,Flash Player退役终究是一件令人唏嘘的事情。在早年,FlashFlash诞生于1996年,为仍处于雏形的互联网带来了更丰富的交互、更多样的色彩、更动感的视觉,是否使用Flash,甚至一度成为网页是否先进的标准——看看多少网页开发的书籍都是Flash教程,就能得以一窥Flash当年的江湖地位。

服务13亿用户的口号,还是名副其实的

然而,时代在变迁,Flash Player已经难以在移动互联网时代继续高歌猛进。当你苹果iOS首度吹响了抛弃Flash Player的号角,乔布斯当年为此甚至发布了一封“Flash 之我见(Thoughts on Flash)” 的长篇公开信,信中抨击了Flash Player的种种缺点,具体如下:

·安全性差,被赛门铁克公司列为 2009 年最差安全记录之一;

·稳定性不好,导致 Mac 电脑死机;

·迟迟未推出移动版,导致手机等移动设备访问 Flash 视频网站时消耗了大量额外的电力;

·Flash 主要的操作习惯均为鼠标定制,在多点触摸操作方式中,大量 Flash 网站需要重写

时至今日,Flash Player依然保留着这些缺点。而随着HTML5的崛起,Flash的功能也早不再是独步江湖,无论是视频播放,还是多媒体交互,HTML5都能做得更好。无论在功能还是性能上,Flash对比HTML5都没有优势。

业界对这些情况是早有了解的。在iOS拒绝Flash登陆后,Android和WP也随之宣布不再支持Flash Player。而在桌面平台上,Flash Player也走到了尽头,无论是Chrome、Firefox还是Edge,都对Flash发出了最后通牒。

无论从兼容、功能、效率、安全的角度出发,Flash都已经跟不上时代,它被淘汰自然也就理所当然了。

中国特供的Flash值得继续使用吗?

由于国情,中国的互联网生态对Flash的依赖是比较重的。国内仍有不少老旧的网络系统,需要借助Flash来实现办公、登录、上传数据等功能。此情此景下,Adobe和重橙网络合作,推出中国特供版的Flash,就有了其合理之处。

Adobe表示,这是为了支持中国大陆地区市场特有的发行渠道、用户习惯和企业、开发者和游戏社区。然而用户对此是否买账?未必。

在Adobe的官方微博下,出现了大量负面评论,不少网友都并不欢迎Flash中国特供版,还有人将其斥为“流氓软件”。出现这样的情况其实是可以理解的,因为从2018年重橙代理Flash一来,中国地区特供的Flash就已经带上了一些强硬的推广风气。

Adobe微博的评论区中,大家并不欢迎Flash中国特供版

例如,当你更新完Flash后,就会弹出一个推广网页,其中的内容可以说非常“屠龙宝刀点击就送”了。又例如,Flash之前还干过捆绑2144游戏中心、强行运行FlashHelperService进程之类的事情,很多作风已经带有流氓软件的特征。在这样的情形下,人们自然会对中国特供版Flash产生不信任。

Flash更新后弹出的游戏推广页面

另一方面,Flash本身作为落后的互联网技术,用特供版来苟延残喘,这是否逆潮流而行?如果让Flash彻底退役,倒逼依赖Flash的各类网络系统来革新,会不会是更合理的做法?这是很值得探讨的问题。

总结

作为旧时代的产物,Flash的退役是合乎情理的。但国内的一些互联网系统仍依赖Flash,中国特供版的Flash依旧有用武之地。

微软Win10内置Flash,会推送补丁修复Flash漏洞

另外,目前Windows10仍内置Flash Player,而且会通过Windows Update推送相应更新,如果你想要避免Flash带来的弹窗等问题,使用Win10内置的Flash或许是更好的选择。当然,在Adobe停止Flash的技术支持后,或许Win10的Flash更新推送也会停止,但国内特供的Flash就会有安全补丁推送吗?重橙网络是否有修补Flash漏洞的能力?我们拭目以待吧。

们要先了解一下什么是浏览器兼容性,

  • 指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。(JS、html、css的兼容性)

  • 在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。

具体指的是以下两方面的不兼容:

a) 不同的浏览器对CSS解释不同

b) 不同的浏览器的默认值表现差别

说到浏览器的兼容性,那我们要了解一下有那些浏览器和浏览器的历史了。

A. Netscape Navigator

Netscape Navigator 网景,开始时是收费的。为IE的崛起留下了后患。

B. IE浏览器

  • 1995年 IE浏览器第一个版本首发

  • 1997年IE4版本发布,再后来2001年8月IE6浏览器独占鳌头

  • 2006年10月IE7发布

  • 2009年3月IE8发布

  • 2011年3月IE9发布

  • 2011年4月IE10发布

C. 2004年11月Firefox1.0首发

D. 2008年 谷歌浏览器发布

E. 1995年4月 opera浏览器发布

做好浏览器的兼容性,也就是我们写的代码要符合一种标准,再让浏览器都符合这种标准也就实现了浏览器的兼容了。

首先我们来看一下我们写的代码要符合那种标准,也就是W3C标准。

W3C—World Wide Web Consortium 万维网联盟,万维网联盟创建于1994年,是WEB技术领域最具有权威和影响力的国际中立性技术标准机构。Web标准是一系列标准的集合。网页主要由三部分组成:结构(Structure)也就是HTML、表现(Presentation)也就是CSS、行为(Behavior)也就是JS。那怎样让我们的代码做到符合WEB标准呢?

HTML标准

1. 每个文档必须加上DOCTYPE声明

2. 定义语言编码

3. 图片的alt="" 属性必须每张图片都加上,而且对齐属性用CSS来定义

4. 标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);

5. 同一个页面当中,同名的ID会产生冲突

6. 标签属性不可省略双引号或单引号,尽量使用双引号

7. 标签之间不可交叉嵌套

8. 所有的标签都使用小写

9. 闭合。双标签必须闭合,单标签(自关闭标签)不闭合

10. 所有的样式全部写在外部文件

11. 页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“

o 任何小于号(<),不是标签的一部分,都必须被编码为

o 任何大于号(>),不是标签的一部分,都必须被编码为

o 任何与号(&),不是实体的一部分的,都必须被编码为

12. 栏目标题部分使用h标签

13. 对于SEO优化的标签有二个比较重要的Strong和Em的。它们的权重是很高的,Strong有重点,突出之意,em有强调 提醒之意

14. 使用表格时不要给表格指定高度,

15. 使用<label>标签包裹radio或checkbox和他们的文字

16. 省略type属性。使用style、link、script,不用指定type属性,因为 text/css 和 text/javascript 分别是他们的默认值。

17. 省略Boolean属性值。Boolean属性不用添加取值,disabled,checked,selected等

18. 详尽注释但是不建议块状注释

CSS标准

1. 不建议CSS中嵌套的层次太多,建议三次为佳

2. 建议把具有共性的CSS提成全局的这样每个需要使用的标签可以去继承;减少CSS代码会提高加载效率

3. 在书写CSS时,建议使用全小写字母

4. 在写CSS属性时,能写复合属性的写复合属性

书写代码原则

1. 规范 。保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离

2. 简洁。保证代码的最简化,避免多余的空格、空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。

3. 实用。遵循标准,但是不能以牺牲实用性为代价

4. 忠诚。选择一套规范,然后始终遵循。不管代码由多少人参与,都应该看起来像一个人写的一样。

以上也是我们书写代码时注意事项。

了解以上的知识点之后我们来看一下如何做到写的代码浏览器兼容吧及常见问题及解决方案

√ CSS Hack(修改)

√ 常见问题(bug)及解决方法

√ 经验与技巧

一、 CSS Hack

1. 什么是CSS Hack

由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack

2. CSS Hack的分类

  • IE条件注释Hack

  • CSS选择符Hack

  • CSS属性Hack

  • !important

  • Css3新增属性及选择器hack

注:css hack的书写顺序:总结出的规律就是:先一般,再特殊 。

好,我们CSS Hack分别讲解一下吧!

2.1 IE条件注释Hack

为什么使用IE条件注释法呢,因为IE的版本不断的更新,还有一部分用户在使用老版本的浏览器,浏览器的版本之间也存在着浏览器的兼容问题,所以要做好浏览器的兼容性。就像现在,如果我们写代码要把IE浏览器兼容好的话,我们要做兼容IE6、IE7、IE8、IE9、IE10、IE11;但是我们知道IE6、IE7几乎没有人使用了,所以我们做页面不需要考虑IE6和IE7了。但是我们对于以前的知识点还是要掌握的。

在这里大家要装一下IE Tester这个集成浏览器。这个软件将所有的IE版本的浏览器集成到了一起,测试不同版本的浏览器兼容性比较方便。

语法:

a):针对CSS添加的条件注释法,根据代码具有注释的版本识别的CSS样式。

<!--[if IE]><!-- 如果是IE浏览器,调用css.css样式表 -->

<link rel="stylesheet" type="text/css" href="css.css" />

<![endif]-->

HTML代码:

CSS代码:

IE浏览器的显示效果:

其它浏览器版本显示的都一样,这里就不一一截图了!

非IE浏览器的显示效(因为是专门对IE浏览器的,所以其它浏览器就不会有效果了):

所以我们可针对不同的IE浏览器那一部分的CSS存在兼容的问题,可以单独去写相关的CSS代码。如果还可以专门指定是那个版本,也可以再加上相关的修饰符,我们这里只演示一个(lt),其它的使用方式都一样。来看一下效果。

HTML代码:

CSS代码:

显示效果: