《后盾网HTML5视频教程》是现在以及未来一项重要的技术,学好HTML5不仅可以让你开发WEB前端界面,设计出能够适应各种尺寸设备的网页;甚至可以让你使用HTML5技术开发出Hybird App(一种混合式开发Android/iOS/Windows Phone等设备的应用);或者用HTML5技术开发出桌面程序(参看Node Webkit项目,请自行Github)。
课程播放地址://m.sbmmt.com/course/469.html
该老师讲课风格:
教师讲课深入浅出,条理清楚,层层剖析,环环相扣,论证严密,结构严谨,用思维的逻辑力量吸引学生的注意力,用理智控制课堂教学进程。学生通过听教师的讲授,不仅学到知识,也受到思维的训练,还受到教师严谨的治学态度的熏陶和感染
本视频中较为难点是HTML5 Canvas了:
1、什么是Canvas
canvas 是 HTML5 提供的一个用于展示绘图效果的标签
canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D或WebGL)
首先由 Apple 引入的,用于OS X的仪表盘 和 Safari 浏览器
1.1 关于Canvas的一些说明
canvas 是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas的标准:
最新标准
稳定版本的标准
目前来说,标准还在完善中。先用早期的api足够完成所有的应用
1.2 canvas主要应用的领域(了解)
1、游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。
2、可视化数据(数据图表话),比如: 百度的echart、d3.js、three.js
3、banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
4、未来
模拟器:无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。
远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
图形编辑器:Photoshop图形编辑器将能够100%基于Web实现。
1.3 课程目标
学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图
实现数据的可视化
2、Canvas标签介绍
<canvas width="600" height="400"></canvas>
作用:展示绘图的内容,但不能进行绘图
2.1 canvas的兼容性
<canvas width="600" height="400">
IE9及其以上版本的浏览器,才支持canvas标签
提示:您的浏览器不支持canvas,请升级浏览器
2.2 设置宽高注意点
1 可以使用 html属性/DOM属性 width 和 height来设置
2 不要:使用CSS样式来设置宽高
使用 属性设置宽高,实际上相当于增加了 canvas画布的像素
默认宽高: 300*150,表示:水平方向有300个像素,垂直方向有150个像素
使用属性设置宽高,是增加或减少了canvas画布的像素;
而使用css样式,不会增加像素点,只是将每个像素点扩大了!
2.3 绘图
使用JavaScript中提供的绘图API来绘制
每个canvas都有一套绘图的API(工具)
2.3.1 绘图的基本步骤
1 找到canvas画布
2 通过canvas拿到绘图上下文(一系列的API集合)
3 使用API绘制需要的图形
// 1 找到canvas var cv = document.getElementById("canvasId"); // 2 拿到canvas绘图上下文 var ctx = cv.getContext("2d"); // 3 使用上下文中的API绘制图形 ctx.moveTo(100, 100); // 将画笔移动到 100,100 的位置 ctx.lineTo(200, 100); // 从 100,100 到 200,100 画一条线段 ctx.stroke(); // 描边
注意点:
getContext("2d"), 参数`2d`是指获取到绘制平面图形的上下文;
如果想绘制立体图形,需要传入参数:"webgl"
2d上下文类型:CanvasRenderingContext2D
获得 webgl 上下文:(了解)
var cCv = document.createElement("canvas"); console.log(cCv.getContext("webgl"));
以上是后盾网HTML5视频教程的详细内容。更多信息请关注PHP中文网其他相关文章!