博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2012-05-27 22:04  webabcd  阅读(6017)  评论(14编辑  收藏

[源码下载]

千呼万唤 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
[源码下载]