一 HTML5概述
HTML5是定义HTML标准的最新的版本
约等于 HTML+CSS+JS
1.1 HTML5的优势
1、跨平台【借助于浏览器,Java跨平台指的是虚拟机(jvm)跨平台】
2、快速迭代
3、降低成本
4、导流入口多
5、开发效率高
1.2 H5开发指移动端开发
1.3 简单认识IOS、安卓、web前端
相同点:三者都是画页面的
区别:
IOS
:oc画页面,c/s架构,跑在设备里
安卓
:java画页面,c/s架构,跑在设备里
web前端
:b/s架构,跑在浏览器上
- 指定网页解码方式
<meta charset="UTF-8">
- 指定浏览器渲染模式
<!DOCTYPE>
-
<!DOCTYPE>
标签前面不能有其他标签,包括注释,有些浏览器会因为这些东西而变成怪异模式,通常情况下,位于一个HTML文档的最前面的位置。 -
申明了就是标准模式,不写就是怪异模式。
-
DOCTYPE,或者称为Document Type Declaration(文档类型声明)。
-
因为浏览器必须在解析HTML文档正文之前就确定当前文档的类型,以决定需要采用的渲染模式,不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析。
- 根元素
<html></html>
二 HTML5语义化
2.1 语义化的好处
- HTML5用更语义化结构化的代码标签代替大量的无异议的div标签
- 这种语义化的特性提升了网页的质量和语义
- 对搜索引擎更加的友好
- 这些标签没有任何默认样式,除了会让文本另起一行。
2.2 常用的语义化标签
<header>
、<footer>
、<nav>
、<section>
2.3 不支持HTML5的浏览器中使用HTML5
需要一个特殊的CSS样式,因为未知元素默认会样式化为display:inline
section, article, aside, footer, header, nav, hgroup {
display:block;
}
三 使用canvas完成基本的在线签名功能
canvas简介 canvas 是 HTML5 新增的标签,用于在网页上绘制图形。
使用场景
随着计算机和网络技术的飞速发展,在线签名技术越来越多的被应用在无纸化办公中,这种直观便利的操作不仅可以大幅提升办公效率,而且使用数字化存储方式,避开了传统的纸质签字存储查阅困难等问题。在我们在日常生活中,已经有很多场景使用在线签名技术,例如:pos机刷卡签字、快递签收签字、银行或机关单位业务办理签字等。
demo地址
demo解析
1、取画笔
if(canvas.getContext){
var ctx = canvas.getContext('2d')
}
2、添加鼠标操作事件
JavaScript鼠标事件有:
事件 | 事件含义 |
---|---|
onClick | 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 |
onDblClick | 鼠标双击事件 |
onMouseDown | 鼠标上的按钮被按下了 |
onMouseUp | 鼠标按下后,松开时激发的事件 |
onMouseOver | 当鼠标移动到某对象范围的上方时触发的事件 |
onMouseMove | 鼠标移动时触发的事件 |
onMouseOut | 当鼠标离开某对象范围时触发的事件 |
使用鼠标拖拽事件api来进行画布绘制:mousedown
canvas.onmousedown = function(ev){
ev = ev || window.event
ctx.beginPath()
document.onmousemove = function(ev){
ev = ev || window.event
ctx.moveTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop)
document.onmousemove = function(ev){
ctx.save()
ctx.strokeStyle = 'skyblue'
ev = ev || event
ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop)
ctx.stroke()
ctx.restore()
}
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null
}
return false
}
每次放下鼠标都重新绘制线条 使用save()和restore()方法包裹一组样式
四 使用canvas 完成基本的时钟
demo地址
demo解析
结合了所有基础api
五 使用canvas 完成基本的橡皮擦效果
demo地址
demo解析
用到了canvas合成和像素操作api