一名前端小白的学习笔记(1/N)--canvas

• 栅格
• 绘制路径
  • 绘制矩形
    • rect(x, y, width, height)
      • 绘制一个左上角坐标为（x,y），宽高为width以及height的矩形
      • 当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）
      • 也就是说，当前笔触自动重置回默认坐标
    • fillRect（x，y，width，height）
      • 绘制一个填充的矩形
    • strokeRect(x, y, width, height)
      • 绘制一个矩形的边框
    • clearRect(x, y, width, height)
      • 清除指定矩形区域，让清除部分完全透明
  • beginPath()
    • 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
  • closePath()
    • 闭合路径之后图形绘制命令又重新指向到上下文中
  • stroke()
    • 通过线条来绘制图形轮廓
  • fill()
    • 通过填充路径的内容区域生成实心的图形
  • moveTo(x,y)
    • 将笔触移动到指定的坐标x以及Y上
  • lineTo(x,y)
    • 绘制一条从当前位置到指定x以及y位置的直线
  • arc(x,y,radius,startAngle,endAngle,anticlockwise)
    • 圆心x，y
    • 半径radius
    • 度数startAngle到endAndgle
      • 单位弧度
        • 弧度=(Math.PI/180)*角度
    • 方向anticlockwise
      • 默认顺时针
  • quadraticCurveTo(cp1x, cp1y, x, y)
    • 二次贝塞尔曲线
      • cp1x, cp1y控制点
      • x, y结束点
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    • 三次贝塞尔曲线
      • cp1x,cp1y为控制点一
      • cp2x,cp2y为控制点二
      • x,y为结束点
• path2D对象
  • Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）
  • new Path2D(); // 空的Path对象
  • new Path2D(path); // 克隆Path对象
  • new Path2D(d); // 从SVG建立Path对象
  • Path2D.addPath(path [, transform])​
    • 添加了一条路径到当前路径（可能添加了一个变换矩阵）。
  • SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们
• 色彩Colors
  • Colors可以是CSS颜色值的字符串，渐变对象或者图案对象
  • fillStyle = color
    • 设置图形的填充颜色
  • strokeStyle = color
    • 设置图形轮廓的颜色
• 透明度Transparency
  • globalAlpha = transparencyValue（0-1）
• 线性Line styles
  • lineWidth = value
    • 设置线条宽度
    • 默认值是1.0
    • ☆半渲染的像素点
  • lineCap = type
    • 设置线条末端样式
    • 默认是butt
    • square
      • 端点处加上了等宽且高度为一半线宽的方块
      • 得到与奇数宽度线的半像素坐标相一致的笔画，这样，端点轮廓的外边框将被自动扩展以完全覆盖整个像素格
    • round
      • 端点处加上了半径为一半线宽的半圆
  • lineJoin = type
    • round
      • 边角处被磨圆了，圆的半径等于线宽
    •  bevel 
    • miter（默认·）
      • 线段会在连接处外侧延伸直至交于一点，延伸效果受到下面将要介绍的 miterLimit 属性的制约
    • 设定线条与线条间接合处的样式
  • miterLimit = value
    • 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
    • 如果交点距离大于此值，连接效果会变成了 bevel
  • getLineDash()
    • 返回一个包含当前虚线样式，长度为非负偶数的数组
  • setLineDash(segments)
    • 设置当前虚线样式
    • 接受一个数组，来指定线段与间隙的交替
  • lineDashOffset = value
    • 设置虚线样式的起始偏移量
• 渐变Gradients
  • createLinearGradient(x1, y1, x2, y2)
    • createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)
  • createRadialGradient(x1, y1, r1, x2, y2, r2)
    • createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆
  • gradient.addColorStop(position, color)
    • addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值
• 图片样式Patterns
  • createPattern(image, type)
    • 该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat
• 阴影Shadows
  • shadowOffsetX = float
    • shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0
  • shadowOffsetY = float
    • shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0
  • shadowBlur = float
    • shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0
  • shadowColor = color
    • shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色
• Canvas填充规则
  • "nonzero": non-zero winding rule, 默认值.
  • "evenodd":  even-odd winding rule.
  • 充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的
• 绘制文本
  • fillText(text, x, y [, maxWidth])
    • 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
  • strokeText(text, x, y [, maxWidth])
    • 在指定的(x,y)位置绘制文本边框（中空），绘制的最大宽度是可选的
  • 格式
    • font = value
      • 同css
    • textAlign = value
      • start(default), end, left, right or center
    • textBaseline = value
      • top, hanging, middle, alphabetic(default), ideographic, bottom
    • direction = value
      • ltr, rtl, inherit(default)
  • 预测量文本宽度
    • measureText()
      • 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性
• 使用图片
  • 基本操作
    • 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片（参见例子）
    • 源
      • HTMLImageElement
        • 这些图片是由Image()函数构造出来的，或者任何的<img>元素
      • HTMLVideoElement
        • 用一个HTML的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
      • HTMLCanvasElement
        • 可以使用另一个 <canvas> 元素作为你的图片源。
      • ImageBitmap
        • 这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
    • 使用相同页面的引用
      • document.images集合
      • document.getElementsByTagName()方法
    • 使用其他域名下的图片
      •  HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas
    • 使用drawImage()函数将图片绘制到画布上