学习《李炎恢HTML5视频教程》视频教程,将向大家详细介绍HTML5,HTML5是超文本标记语言(HTML)的第五次重大修改,即最新版本;它比原来的标准又增加了一些新的标签,实现更多功能,更标准化,更适用于移动互联网。
视频播放地址:http://www.gree020.cn/course/365.html
本课程的难点在于html5中的新增内容和canvas的用法:
很多画图效果都是使用canvas来实现的,所以学好canvas是学好HTML5的关键所在。
1. canvas 简介
1.1 canvas 是什么?
是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
但是需要注意,canvas 元素本身并不绘制图形,它只是相当于一张空画布。
如果开发者需要向 canvas 上绘制图形,则必须使用 JavaScript 脚本进行绘制。
1.2 canvas 能够做什么?
基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作
1.3 支持的浏览器
大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.
IE8及以下不支持HTML5,但是我们可以进行提示用户更新到最新的版本
1.4 关于canvas 标签的基本概念
在 HTML 页面上定义 canvas 元素与定义其他普通元素并无任何不同,它吃了可以指定 id, style ,class ,hidden 等通用属性之外,还可以设置 width 和 height 两个属性。
为什么要特意去说这个呢?
咱们在 章节 2.2 中详细去说明。
除此之外,我们在网页中定义 canvas 元素之后,它只是一张空白的画布,想要在画布上绘画,一定要经过下面几步。
获取 canvas 元素对应的 DOM 对象,这必须是一个 canvas 对象
调用 canvas 对象的 getContext( ) 方法,该方法返回一个 canvasRenderingContext2D 对象,该对象可以绘制图形。
调用 canvasRenderingContext2D 对象的方法进行绘图。
那么我们就来开始我们的canvas 实战,来看看 canvas 该如何会绘制图形。
2.canvas 实战
2.1 查看当前浏览器对 canvas 的支持情况
我们在上面也说明了,我们的一些浏览器是不支持 canvas 的,这个时候我们应该怎么去做呢?
这时候我们可以直接在 canvas 标签之间去书写内容,这么做的好处是当你的浏览器不支持 canvas 的时候,我们可以去展示标签之间的内容,具体如下。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Document</title>
<style type=text/css>
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>
既然已经创建完成了具体的内容,那我们现在可以看见了么?
我们虽然没有给定 canvas 的宽度和高度,但是实际上我们的canvas 在页面中是可见的。
需要注意,canvas 默认样式的宽度和高度 是 300px * 150px.
即使我们不去设置具体的宽度和高度,它也是可以显示的。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Document</title>
<style type=text/css>
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>
以上就是李炎恢HTML5视频资料分享的详细内容,更多请关注云资源网其它相关文章!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
云资源网 » 李炎恢HTML5视频资料分享
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 你们有qq群吗怎么加入?