纪年科技aming

  • 画布标签——HTML5原生作图
    H5——canvas标签介绍_前端
    H5——canvas标签介绍_前端_02

  • 文档类型定义（DTD）

  • 双标签

  • ie678 × ie9 √
    H5——canvas标签介绍_前端_03

  • 新建默认白色
    H5——canvas标签介绍_前端_04

  • 仅仅使用 h5 没啥用 + js 来操作
    H5——canvas标签介绍_前端_05H5——canvas标签介绍_前端_06

  • 全部为 js + canvas

canvas API

H5——canvas标签介绍_前端_07
H5——canvas标签介绍_前端_08
H5——canvas标签介绍_前端_09
H5——canvas标签介绍_前端_10
H5——canvas标签介绍_前端_11
H5——canvas标签介绍_前端_12
H5——canvas标签介绍_前端_13
H5——canvas标签介绍_前端_14H5——canvas标签介绍_前端_15H5——canvas标签介绍_前端_16H5——canvas标签介绍_前端_17H5——canvas标签介绍_前端_18
H5——canvas标签介绍_前端_19

  • 获取 画布Dom
  • webgL ---->3d
    H5——canvas标签介绍_前端_20

H5——canvas标签介绍_前端_21
H5——canvas标签介绍_前端_22H5——canvas标签介绍_前端_23

  • 开始位置 左上---->右下

H5——canvas标签介绍_前端_24
H5——canvas标签介绍_前端_25
H5——canvas标签介绍_前端_26
H5——canvas标签介绍_前端_27

H5——canvas标签介绍_前端_28

H5——canvas标签介绍_前端_29

  • 路径画图 开始与结束
  • 连续化
    H5——canvas标签介绍_前端_30
    H5——canvas标签介绍_前端_31H5——canvas标签介绍_前端_32
    H5——canvas标签介绍_前端_33
    H5——canvas标签介绍_前端_34H5——canvas标签介绍_前端_35H5——canvas标签介绍_前端_36H5——canvas标签介绍_前端_37

H5——canvas标签介绍_前端_38

  • 封闭路径 fill 同样有效
  • 可以路径分割
    H5——canvas标签介绍_前端_39H5——canvas标签介绍_前端_40
    H5——canvas标签介绍_前端_41
    H5——canvas标签介绍_前端_42
    • 无填充 镂空字

H5——canvas标签介绍_前端_43
H5——canvas标签介绍_前端_44
H5——canvas标签介绍_前端_45H5——canvas标签介绍_前端_46H5——canvas标签介绍_前端_47
H5——canvas标签介绍_前端_48

  • 多边形 先封闭
    H5——canvas标签介绍_前端_49
    H5——canvas标签介绍_前端_50
    H5——canvas标签介绍_前端_51H5——canvas标签介绍_前端_52
    H5——canvas标签介绍_前端_53
    H5——canvas标签介绍_前端_54H5——canvas标签介绍_前端_55
  • 建立空间
  • 选参考点
  • 转转
  • 画图