仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1596|回复: 8
打印 上一主题 下一主题

[HTML5] html教程之HTML5教程(1):HTML5的Canvas概述

[复制链接]
深爱那片海 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-15 23:19:37 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
HTML5TheMediaCaptureAPI提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签网页制造poluoluo文章简介:HTML5的Canvas,剧本言语的新舞台.
<canvas>是一个新的HTML元素,这个元素能够被Script言语(一般是JavaScript)用来绘制图形。比方能够用它来绘图、分解图像、或做复杂的(和不那末复杂的)动画。左面的图像展现了一些<canvas>的使用示例,我们将会在此教程中看到他们的完成。
<canvas>开始在苹果公司(Apple)的MacOSXDashboard上被引进,尔后被使用于Safari。基于Gecko1.8的扫瞄器,比方Firefox1.5,也撑持这个新元素。元素<canvas>是WhatWGWebapplications1.0也就是人人都晓得的HTML5尺度标准的一部分。
在本教程中,我将试着报告怎样在你本人的网页中利用<canvas>元素。供应的示例应当会给你些明晰观点,即用<canvas>能做些甚么的。这些示例也可作为你使用<canvas>的出发点。
入手下手利用之前

用元素<canvas>其实不难,只需你具有HTML和JavaScript的基本常识。
如上所述,并非一切古代扫瞄器都撑持<canvas>元素,以是你必要Firefox1.5或更新版本、大概其他基于Gecko的扫瞄器比方Opera9、大概比来版本的Safari才干看到一切示例的举措。
1.Canvas是什么?

上面网址能够找到html5Canvas的完全界说
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas

如今Firefox2,safari都间接撑持Canvas,IE必要一个ExCanvas的js代码库转换。

上面网址能够找到ExCanvas[此js库还没有供应对arcto(),clip()的撑持,因而基于其上的各类chart组件自然的不克不及天生pie图]
http://excanvas.sourceforge.net/

Mozilla的Canvas进门
http://developer.mozilla.org/en/docs/Category:HTML:Canvas

Mininova的Canvas进门
http://labs.mininova.org/canvas/

2.Canvas能做什么?

(1)Msx摹拟器

ItemulatestheunderlyingZ80CPU,TMS9918VideoDisplayProcessor(VDP),PPI,RAMslotsandMegaram.Initspresentform,itshouldbeabletorunanyprogramorgamedevelopedforMSX1.0.

用js摹拟Z80等硬件,读取rom信息,无声游戏
http://jsmsxdemo.googlepages.com/jsmsx.html

(2)Painter
假设功能同意,开展成Webphoto也是大概的事变。
http://caimansys.com/painter/index.html

(3)效果
水波纹
http://timelessname.com/canvas/experiment01/
某个含混实际视觉模子
http://timelessname.com/canvas/experiment02/

(4)3D

多面体
http://www.polyhedra.org/poly/

3D舆图
Mozilla的例子,RayCaster就是一个。

Canvascape-3Dwalker,比下面例子更完美些,还供应纹理贴图功效
一个相似CS的界面
http://www.abrahamjoffe.com.au/ben/canvascape/

(5)chart组件

成形的有WebFxChart,Flot等,必要可自行搜刮。

3.Canvas的开展

(1)Canvas代码转换到Flash(portingcanvastoflash)
http://team.mixmedia.com/index.php?title=porting_canvas_to_flash&more=1&c=1&tb=1&pb=1
(2)撑持Canvas的框架

mootools撑持Canvas的挪用,并有一个mocha的基于mootools的组件供应一个窗体功效。
</p>
HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展.
灵魂腐蚀 该用户已被删除
8#
发表于 2015-3-27 17:36:39 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
若相依 该用户已被删除
7#
发表于 2015-3-19 08:30:46 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
老尸 该用户已被删除
6#
发表于 2015-3-4 11:20:12 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
莫相离 该用户已被删除
5#
发表于 2015-2-15 03:51:46 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
蒙在股里 该用户已被删除
地板
发表于 2015-2-6 02:31:14 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
简单生活 该用户已被删除
板凳
发表于 2015-1-29 15:11:14 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
小妖女 该用户已被删除
沙发
发表于 2015-1-20 18:50:42 来自手机 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
楼主
发表于 2015-1-17 11:48:33 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-10 17:38

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表