• 技术文章 >web前端 >H5教程

    canvas可以替代html与css了吗?

    2016-06-07 08:43:46原创2087
    前几天和朋友聊天的时候得知,现在的前端页面可以不使用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
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:canvas htlm5 demo html css
    上一篇:有哪些比较优秀的前端框架? 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 哪个开源的移动 HTML5 框架更好一点?此问题提出于2011年• HTML5 应用程序缓存(Application Cache)• 基于Modernizr 让网站进行优雅降级的分析_html5教程技巧• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• HTML5 常用语法一览(列举不支持的属性) _html5教程技巧
    1/1

    PHP中文网