资料来源 imooc 慕课网

1.1 位图 & 矢量图

Paste_Image.png

Paste_Image.png

1.2 基本图形

基本图形

rect

rect

circle

circle

ellipse

ellipse

line

line

polyline

polyline

polygon

polygon

The following commands are available for path data:
• M = move to
• L = line to
• H = horizontal line to
• V = vertical line to
• C = curve to
• S = smooth curve to
• Q = quadratic Bézier curve 二次贝塞尔曲线
• T = smooth quadratic Bézier curveto 光滑二次贝塞尔曲线
• A = elliptical Arc 椭圆弧
• Z = close path

填充 描边 和 变换

• fill
• stroke
• stroke-width
• transform

1.3 基本操作API

• 创建图形：document.createElementNS(namespaceURI, qualifiedName[, options]);
namespaceURI：string that specifies the namespace to associate with the element.
  qulifiedName：A string that specifies the type of element to be created > a nodeName
  optiond：A optional object ElementCreationOptions containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define().
  (创建之后记得用appendChild()添加)

• 添加图形：document.appendChild(childElement)

• 获取 / 设置：
  element.setAttribute(name, value)
element.getAttribute(name)

1.4实例