通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

最新推荐文章于 2024-02-01 16:34:10 发布
最新推荐文章于 2024-02-01 16:34:10 发布
阅读量290 收藏
点赞数
文章标签： 前端 后端 ViewUI

常常听到人们对于HTML5的讨论，看了页面头部这个那个就是HTML5，误认为HTML5只是新增些标签“而已”，学完了W3School似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页乃至移动应用技术。这里我们通过实际的例子来说明HTML5不是想象中的那么单薄（尽管还不那么成熟，还依赖于标准和浏览器的进一步发展），而是一本厚厚的需要长期学习的长篇巨著，HTML5甚至使得技术含量的天平在从后端向前端工程师倾斜，对于整个互联网行业的结构性影响都是非常深远的。

HTML5

HTML5不只是简化了协议声明，添加了若干标签和API，其核心目标是把网页变成富媒体，最重要的就是给了你随心所欲的画布（canvas），Web再也不是枯燥的文本内容和使用JS制作的简单DOM变化效果，前端工程师利用数学知识可以成为网页魔法师（艺术家）。

http://wow.techbrood.com/fiddle/26587

http://wow.techbrood.com/fiddle/12892

CSS3

CSS3的核心改变在于引入了动画和特效，再也不是静态的样式，你可以利用filter、animation、gradient、blend-mode、shadow等特性制作出PS都做不出来的艺术动画！还有一个重要特性是媒体查询，用来支持响应式设计。

http://wow.techbrood.com/fiddle/28386

http://wow.techbrood.com/fiddle/28385

SVG

SVG的核心是几何图形，为网页引入了矢量图，通过矢量图的操作，可以实现很棒的变形动画特效。

http://wow.techbrood.com/fiddle/14579

http://wow.techbrood.com/fiddle/16689

WebGL

WebGL的核心很简单，就是把网页从2D变成3D展示和交互。（CSS3也有3D效果，但是WebGL是硬件加速的！）

http://wow.techbrood.com/fiddle/11465

http://wow.techbrood.com/fiddle/14101

ReactJS/AngularJS等框架

大公司的前端工程化工具，通过组件化规范化的方式试图“简化”Web编程，但需要提醒的是大公司工具往往是小团队的坑。

在用户需求更为灵活和个性化的中小项目市场，关注HTML5和创意设计本身可能要更为重要。

http://wow.techbrood.com/fiddle/30186

http://wow.techbrood.com/fiddle/27762


by iefreer

iteye_11495
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
720度全景场景HTML5源码,直接在浏览器中运行
08-12
全景，英文名(Panorama），又被称为3D实景，是一种新兴的富媒体技术，其与视频，声音，图片等传统的流媒体最大的区别是“可操作，可交互”。 全景分为虚拟现实和3D实景两种。虚拟现实是利用maya等软件，制作出来的模拟现实的场景，代表有虚拟紫禁城，河北虚拟旅游，泰山虚拟游等；3D实景是利用单反相机或街景车拍摄实景照片，经过特殊的拼合，处理，让作者立于画境中，让最美的一面展现出来。打开index.html可直接运行。
【性能篇】28 # Canvas、SVG与WebGL在性能上的优势与劣势
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-19 3545
【跟月影学可视化】学习笔记。在浏览器上渲染动画，每一秒钟最高达到 60 帧左右。1 秒钟内完成 60 次图像的绘制，那么完成一次图像绘制的时间就是 1000/60（1 秒 =1000 毫秒），约等于 16 毫秒。达到比较流畅的动画效果的最低帧率是 24fps，相当于图形系统要在大约 42 毫秒内完成一帧图像的绘制。影响 Canvas 渲染性能的 2 大要素：Google Chrome浏览器怎么开启查看帧率功能？测试例子： 在 Canvas 上每一帧绘制 个半径为 的小圆：在 Canvas 上每一帧绘制
8. Threejs案例-SVG渲染器和WEBGL渲染器对比
最新发布
能带孩子会做饭
02-01 1439
8. Threejs案例-SVG渲染器和WEBGL渲染器对比 SVGRenderer 被用于使用 SVG 来渲染几何数据创建SVG渲染器，并设置其大小为窗口大小创建WebGL渲染器，开启抗锯齿功能，并设置其大小为窗口大小创建三个线段，设置其材质、大小和旋转属性，并将它们添加到场景中创建三个线段，设置其材质、大小和旋转属性，并将它们添加到场景中
三种图表技术SVG、Canvas、WebGL 3D比较
a5199421的博客
08-09 818
1.什么是SVG？ 描述： 一种使用XML描述的2D图形的语言 SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 2.什么是canvas？ 描述： 通过Javascript来绘制2D图形。 ...
【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型
luemeon的博客
11-26 509
不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。
html5 svg+css3带左侧收缩菜单宇航员
07-13
注：无后台 html5 svg+css3带左侧收缩菜单宇航员
HTML5 CSS3 SVG动态生成多任务列表.rar
07-10
HTML5 CSS3 SVG动态生成多任务列表，用户在输入框输入字符串，会自动生成一个条目，可无限制生成条目，如示例图所示。其实这个列表很像是一个菜单那样，又像是以前那种输入提示，带有动画效果，每一个条目都可以关闭...
CSS3+HTML5 SVG彩色霓虹灯文字特效
06-11
一款好看的CSS3+HTML5 SVG彩色霓虹灯文字特效，霓虹灯文字走马灯动画效果。
HTML5+SVG+CSS3 雪中点亮的圣诞树
12-15
HTML5+SVG+CSS3 雪中点亮的圣诞树
SVG/CSS3镂空3D自行车骑行动画
08-23
之前我们分享过一些基于CSS3和SVG的自行车动画，比如这款SVG/CSS3自行车 模拟自行车行驶动画和纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画，与前面自行车动画不同的...
Using SVG with CSS3 and HTML5 Vector Graphics for Web Design azw3
10-24
Using SVG with CSS3 and HTML5 Vector Graphics for Web Design 英文azw3 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
Using SVG with CSS3 and HTML5 Vector Graphics for Web Design 原版无水印pdf
10-24
Using SVG with CSS3 and HTML5 Vector Graphics for Web Design 原版英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
Using SVG with CSS3 and HTML5
10-30
Using Scalable Vector Graphics (SVG) for illustrations only scratches the surface of this format’s potential on the web. With this practical guide, you’ll learn how to use SVG not only for illustrations but also as graphical documents that you can integrate into complex HTML5 web pages, and style with custom CSS. Web developers will discover ways to adapt designs by adding data based graphics, dynamic styles, interaction, or animation. Divided into five parts, this book includes: SVG on the web: Understand how SVG works with HTML, CSS, and JavaScript to define graphics Drawing with markup: Learn the vector language of x and y coordinates that let SVG create basic and custom shapes Putting graphics in their place: Use the coordinate system to draw SVG shapes and text at different scales and positions Artistic touches: Explore how color is used, how strokes are created and manipulated, and how graphical effects like filters, clipping, and masking are applied SVG as an application: Make your graphic more accessible to humans and computers, and learn how to make it interactive or animated
svg web
05-27
NULL 博文链接：https://helius1214.iteye.com/blog/615410
Canvas、 SVG 和 WebGl三者之间的区别
peifeng_chen的微博
08-12 229
可看作能在浏览器上运行的OpenGL,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的。Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。，是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
新技术革命
03-02 1035
目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret（白鹭引擎） 三、SVG 3.1、SVG Hello Wrold 3.2、多种引入SVG的方法 3.3、画直线 3.4、画椭圆 3.5、文本与矩形 3.6、
WebGL、canvas、svg
好好学习天天向上
09-01 1183
webGL是一种帮助我们开发3D网页的绘图技术，底层是JavaScript APIWebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果。
html文件引入svg/1.svg
02-16
这将在HTML文档中创建一个图像元素，其源文件为1.svg，同时还提供了一个备用文本说明，以便于屏幕阅读器可以理解该图像的内容。 请注意，SVG文件的路径应该相对于HTML文件的位置来引用。例如，如果HTML和SVG文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值