千呼萬喚 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
[源碼下載]