千呼万唤 HTML 5 系列文章索引
千呼万唤 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
[源码下载]
