[转载]千呼万唤 HTML 5 系列文章索引

[源码下载]

作者：webabcd

介绍
千呼万唤 HTML 5 系列文章索引：HTML 5

1、千呼万唤 HTML 5 (1) – 根元素, 元数据元素, 脚本元素
介绍
HTML 5: 根元素, 元数据元素, 脚本元素

• 根元素 – doctype, html
• 元数据元素 – head, title, base, link, meta, style
• 脚本元素 – script, noscript

2、千呼万唤 HTML 5 (2) – 区块元素
介绍
HTML 5: 区块元素

• 区块元素 – body, article, section, header, footer, h1, h2, h3, h4, h5, h6, hgroup, aside, nav, address

3、千呼万唤 HTML 5 (3) – 内容分组元素
介绍
HTML 5: 内容分组元素

• 内容分组元素 – p, hr, pre, blockquote, ul, ol, li, dl, dt, dd, figure, figcaption, div

4、千呼万唤 HTML 5 (4) – 文本语义元素
介绍
HTML 5: 文本语义元素

• 文本语义元素 – a, em, strong, small, s, cite, q, abbr, time, code, var, dfn, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr

5、千呼万唤 HTML 5 (5) – 元素的通用属性
介绍
HTML 5: 元素的通用属性

• 元素的通用属 性 – accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone

6、千呼万唤 HTML 5 (6) – 表单元素之 input 元素
介绍
HTML 5: 表单元素之 input 元素

• 表单元素之 input 元素 – text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week
• input 元素的通用属性 – autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

7、千呼万唤 HTML 5 (7) – 表单元素
介绍
HTML 5: 表单元素

• 表单元素 – form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output
• 表单验证

8、千呼万唤 HTML 5 (8) – 画布（canvas）之绘制图形
介绍
HTML 5: 画布（canvas）之绘制图形

• 画布 Demo – 画布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
• 在画布上绘制矩形 – canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
• 在画布上绘制弧线（以路径的方式）- beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
• 在画布上绘制曲线（以路径的方式）- quadraticCurveTo(), bezierCurveTo()
• 在画布上绘制直线（以路径的方式）- lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
• 在画布上绘制矩形（以路径的方式）- rect()

9、千呼万唤 HTML 5 (9) – 画布（canvas）之承载媒体
介绍
HTML 5: 画布（canvas）之承载媒体

• 呈现文本 – font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
• 呈现图片 – drawImage()
• 呈现视频截图 – drawImage()
• 呈现其他画布 – drawImage()

10、千呼万唤 HTML 5 (10) – 画布（canvas）之转换
介绍
HTML 5: 画布（canvas）之转换（转换画布的用户坐标系）

• 平移 | translate()
• 旋转 | rotate()
• 缩放 | scale()
• 矩阵转换 | transform(a, b, c, d, e, f)
• 矩阵转换 | setTransform(a, b, c, d, e, f)

11、千呼万唤 HTML 5 (11) – 画布（canvas）之效果
介绍
HTML 5: 画布（canvas）之效果

• 填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
• 剪裁 | clip()
• 渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
• 贴图的平铺模式 | createPattern()
• 阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
• 全局 Alpha | globalAlpha
• 新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
• 保存画布上下文，以及恢复画布上下文 | save(), restore()
• 像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray

OK
[源码下载]