Home > Web Front-end > H5 Tutorial > canvas可以替代html与css了吗?

canvas可以替代html与css了吗?

WBOY
Release: 2016-06-07 08:43:46
Original
3002 people have browsed it

前几天和朋友聊天的时候得知,现在的前端页面可以不使用html布局,css样式,整个页面只有一个canvas标签,页面中的各个元素,包括事件,全部由canvas来渲染,现在htlm5的发展已经这么强大了吗?如果上面这个情况真的已经可以实现了,有没有成熟的产品或者demo可以看到?

回复内容:

如果canvas能代替html/css,那么html/css从一开始就不会出现。因为屏幕就是一个大canvas,上面的一切都是“画”出来的,就是因为有时候“画”太麻烦,才出现了html/css,用来“写”。不过这么说的话canvas确实可以取代html/css,因为理论上你可以在canvas上重新实现一套布局引擎,要不就叫 【H五C三插ML】 吧,这样的话你就可以再也不用html/css了。 AJAX + DOM API可以代替HTML和CSS了。
Flash可以代替HTML和CSS了。
…………
…………


然并卵,,,,, canvas 是画布,什么叫画布,就是专精于图形、动画、游戏、拟真场景、3D……画布发明出来不是用来替代 HTML 的,用画布来实现正常 HTML 干的事,就是大炮打蚊子,不光大材小用,而且打得不准。 渲染时你得处理视觉吧
处理视觉不能没有规范吧,不能每个元素都是新造出来的吧
你得写个规范,制定一个样式配置表标准吧
于是你得实现一套处理样式配置的东西吧
然而这不就是现在的css在做的事吗
然后canvas画布上点击等事件得有响应吧
你得写一个事件管理器吧
管理事件的模型你准备怎么写呢?坐标解析?
然而这不就是现在的dom机制吗?
于是你绕了一个大弯把现有的轮子重造了一遍,性能还更差
所以canvas的适用场景还是很少 明显的,这个疑问是没多大意义的。
canvas和HTML5的关系是来说,canvas是HTML5里面的一个标签而已,他们的关系是包含关系。
canvas是画布,基本来说就是可以用JavaScript来操作的位图,因此canvas的作用倾向于处理图形图像的。主要用来制作游戏、图表、模拟器等等。
首先题主的这个问题来看,是认为现在一个页面上的所有信息、交互、时间都可以用canvas来实现,一定理论角度来讲,大部分是可以实现的。
然而从其他角度来讲完全是件扯淡的事嘛。
首先来说,一个页面是渲染出来的过程是浏览器先解析DOM Tree和CSS样式,然后根据样式渲染页面。
如果是用canvas来实现一个前端页面,从性能和效率来说是非常低的。
从开发效率来说的话,也是加大工作量的,很多原本很简单的小功能估计都要写一大堆函数吧。
所以canvas有他自己该干的是,很多东西不是可以就行,而是要讲究适合,最佳实践听说过没有。 你那几个朋友的技术水平是不是也太差了点
这会去用unity3d 开发一个阅读类应用吗?能做是一回事,是不是最优方案又是一回事。 可以,Flipboard 在今年二月份就已经在用了,主要的考虑就是,DOM 太重了,在手机上更是格外的慢。Canvas 在移动平台有很好的硬件加速支持,可以做出很多酷炫的交互效果,同时在大多数手机上流畅运行。

代价当然也是有的,有很多基础性的轮子要重新造一遍,遇到坑的话,Android 可以自己带一个render engine,iOS 上就只能等(并不靠谱的)苹果来修复了。

参考:60fps on the mobile web 不能
用canvas去实现html和css的功能,相当于在浏览器里做一个浏览器的模拟器
完全吃饱了撑着
别胡思乱想,给大脑留点营养思考该学习的东西 之前关注过这个:barmalei/zebra · GitHub 参考国内的Egret引擎,他们用xml来封装canvas组件,其实这也不算创新了,源于Adobe的Flex
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template