canvas(一)

### Drawing shapes

在获取node后调用node.getContext(2d),可以获取到CanvasRenderingContext2DO,并对其进行操作,canvas只有两种原始类型的形状,矩形和路径:

绘制矩形

  • O.fillRect(x,y,width,height): 默认为黑色的矩形
  • O.strokeRect(x,y,width,height): 默认为灰色边框的矩形
  • O.clearRect(x,y,width,height): 产生一个默认颜色为白色不透明的矩形

绘制路径

创建路径一般分为以下几个步骤:

  1. O.beginPath(): 创建一个path
  2. O.moveTo(): 将画笔移动到某一起点
  3. path methods: 调用各种路径API进行绘制
  4. O.closePath(): 闭合路径,调用fill()填充时,路径会自动闭合(stroke()是不行的)而无需调用该方法
  5. O.stroke() or O.fill(): 进行路径绘制或者实心的涂画

Path2D

使用Path2D Object可以更清晰的使用画布的API,可以缓存画布里的路径对象重复使用并提高性能,而且可以配合svg进行绘画;

Applying styles and colors


fillStyle and strokeStyle

O.fillStyle / O.strokeStyle = “colorValue”: 用来设置图像填充颜色和图像outline的颜色,默认值为black黑色,colorValue为合法的颜色值;

Transparency全局透明度

O.globalAlpha = 0.5: 设置以后所有的图像透明度均为0.5

line styles

  • O.lineWidth = value:设置线宽,负值,Infinity,NaN都会被忽略
  • O.lineCap =”butt” / “round” / “square”: 设置线尾为 “方形” “圆形” “添加一截与线相同宽度,一半宽的长度的box” 样式
  • O.lineJoin = “round” / “bevel” / “miter”: 设置两条片段(包括lines,arcs,curves)交汇处应该是 “弧线” “横切” “直角” 样式
  • O.miterLimit = value: 麻蛋看不懂这个…
  • O.setLineDash([虚线点宽,虚线点间隔]),O.getLineDash():设置即返回虚线上点的宽度和点之间的间隔的宽度
  • O.lineDashOffset=value,这个例子一看便知

Gradients

渐变分为线性渐变和环形渐变,首先要创建相应的渐变对象

  • var gradient = createLinearGradient(x1, y1, x2, y2)

(x1,y1),(x2,y2)为渐变起止点,沿该两点方向进行渐变。note:只是在这两个点之间形成的矩形区域内是渐变的

  • var gradient = createRadialGradient(x1, y1, r1, x2, y2, r2)

(x1,y1,r1),(x2,y2,r2) 分别为环形渐变的内环和外环,三个值用来表示圆心和半径

  • gradient.addColorStop(position, color)

position是0~1之间的数,意味着从你绘制区域的百分比位置position开始,颜色为第二个参数color,且不参与渐变,即覆盖与之前渐变重叠的区域

Patterns

var pattern = O.createPattern(image, type);O.fillStyle / O.strokeStyle= pattern:
用来创建一个图像对象,并按”type”(类似于background-repeat)进行重复平铺。”image”是CanvasImageSource类型值,可以使image对象、video对象,等CanvasImageSource类型值。
用image对象作为image参数时,请确image已经加载完毕.
最后将值赋值给填充样式或者绘笔的样式

shadow

  • O.shadowOffsetX = float: 阴影在x轴的偏移
  • O.shadowOffsetY = float: 阴影在Y轴的偏移
  • O.shadowBlur = float:阴影的模糊度
  • O.shadowColor = color: 阴影的颜色

fill rules

填充规则用来判断一个点是否属于一段闭合的曲线,如果属于,则是”inside”,即填充,如果不属于,则为”outside”,即不填充。
来自维基百科

  1. “nonzero-rule” 非零规则(图B):
    以这个点为起点,向外发出一条射线,该射线被两段曲线分割,顺时针方向曲线-1,逆时针方向曲线+1(当然也可以认为顺时针+1,逆时针-1),由于该射线被两条顺时针方向的曲线分割,和值不为0,故该点为”inside”。总结下,如果分割曲线线的顺逆方向的数量相同,则为”outside”,否则为”inside”;
  2. “even-odd rule” 奇偶规则(图A):
    以这个点为起点,向外发出一条射线,该射线被两段曲线分割,即被偶数个曲线分割,则为”outside”;如果被奇数个曲线分割,则为”inside”

drawing-text


  • O.font=”28px serif”;O.fillText(text,x,y[,maxWidth]);
  • O.font=”28px serif”;O.strokeText(text,x,y[,maxWidth]);

    canvas rendering context提供了以上两个方法绘制文字,text文本/(x,y)坐标点/文本最大宽度。一个是实心的字体,一个是空心的字体。

    Styling text

  • font=””: 使用css中font的属性值来设置字体,默认值为”10px sans-serif”;
  • textAlign=””: 文本对齐方式,start / end / left / right / center. 默认值 start。
  • textBaseline = “”: 基线设置,top / hanging / middle / alphabetic / ideographic / bottom。默认值为alphabetic
  • direction = “”: 文本起始方向ltr, rtl, inherit

measureText

O.measureText(): 返回TextMetrics文本的宽度即一些其他信息,但是目前只支持width…