• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > canvas可以替代html与css了吗?

canvas可以替代html与css了吗?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含canvas,htlm5,demo,html,css等相关知识,匿名希望在学习及工作中可以帮助到您
前几天和朋友聊天的时候得知,现在的前端页面可以不使用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

您可能想查找下面的文章:

  • canvas与html5实现视频截图功能示例
  • 详解html5 canvas常用api总结(二)--绘图API
  • HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
  • 详解使用HTML5 Canvas创建动态粒子网格动画
  • 解决canvas转base64/jpeg时透明区域变成黑色背景的方法
  • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
  • HTML5 canvas基本绘图之图形组合
  • HTML5 canvas基本绘图之文字渲染
  • HTML5 canvas基本绘图之绘制曲线
  • HTML5 canvas基本绘图之图形变换

相关文章

  • 2018-12-03HTML5 手势检测原理和实现
  • 2018-12-03jQuery Validation的使用详解
  • 2018-12-03nodejs的爬虫框架superagent
  • 2018-12-03响应式布局、移动端布局,有什么区别?
  • 2017-08-06HTML5+CSS3模仿优酷视频截图功能示例
  • 2018-12-03HTML5 Input 类型的详细介绍以及实例代码
  • 2017-08-06html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
  • 2018-12-03HTML5实战与剖析之延迟脚本
  • 2018-12-03当一个人说自己“精通JavaScript, CSS3, HTML5”时应该如何理解?
  • 2017-08-06html5指南-3.如何实现html元素拖拽功能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Javascript this 的一些学习总结
    • h5实现放大镜效果的代码
    • html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
    • Range:HTML5中的新型Input类型
    • html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形_html5教程技巧
    • html5 canvas标签是什么意思?canvas标签使用方法介绍
    • HTML5 Web Storage的图文详解
    • Websocket原理的深入理解
    • HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
    • 详解HTML5通讯录获取指定多个人的信息

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有