Canvas 样式控制

1.线性

以下的方法和属性控制线条的视觉特征。

CanvasRenderingContext2D.lineWidth：指定线条的宽度，默认为 1.0。
CanvasRenderingContext2D.lineCap：指定线条末端的样式，有三个可能的值：butt（默认值，末端为矩形）、round（末端为圆形）、square（末端为突出的矩形，矩形宽度不变，高度为线条宽度的一半）。
CanvasRenderingContext2D.lineJoin：指定线段交点的样式，有三个可能的值：round（交点为扇形）、bevel（交点为三角形底边）、miter（默认值，交点为菱形)。
CanvasRenderingContext2D.miterLimit：指定交点菱形的长度，默认为 10。该属性只在lineJoin属性的值等于miter时有效。
CanvasRenderingContext2D.getLineDash()：返回一个数组，表示虚线里面线段和间距的长度。
CanvasRenderingContext2D.setLineDash()：数组，用于指定虚线里面线段和间距的长度。

context.beginPath()
context.moveTo(100, 100)
context.lineTo(200, 200)
context.lineTo(100, 200)

context.lineWidth = 3
context.lineCap = 'round'
context.lineJoin = 'round'
context.setLineDash([15, 5])
context.stroke()

上面代码中，线条的宽度为 3，线条的末端和交点都改成圆角，并且设置为虚线。

2.渐变色

以下方法用于设置渐变效果和图像填充效果。

CanvasRenderingContext2D.createLinearGradient()：定义线性渐变样式。
CanvasRenderingContext2D.createRadialGradient()：定义辐射渐变样式。
CanvasRenderingContext2D.createPattern()：定义图像填充样式。

createLinearGradient()方法按照给定直线，生成线性渐变的样式。

context.createLinearGradient(x0, y0, x1, y1)

context.createLinearGradient(x0, y0, x1, y1)方法接受四个参数：x0和y0是起点的横坐标和纵坐标，x1和y1是终点的横坐标和纵坐标。通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。

该方法的返回值是一个CanvasGradient对象，该对象只有一个addColorStop()方向，用来指定渐变点的颜色。addColorStop()方法接受两个参数，第一个参数是 0 到 1 之间的一个位置量，0 表示起点，1 表示终点，第二个参数是一个字符串，表示 CSS 颜色。

var gradient = context.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, 'pink')
gradient.addColorStop(1, 'skyblue')
context.fillStyle = gradient
context.fillRect(10, 10, 200, 100)

上面代码中，定义了渐变样式gradient以后，将这个样式指定给fillStyle属性，然后fillRect()就会生成以这个样式填充的矩形区域。

createRadialGradient()方法定义一个辐射渐变，需要指定两个圆。

context.createRadialGradient(x0, y0, r0, x1, y1, r1)

createRadialGradient()方法接受六个参数，x0和y0是辐射起始的圆的圆心坐标，r0是起始圆的半径，x1和y1是辐射终止的圆的圆心坐标，r1是终止圆的半径。

该方法的返回值也是一个CanvasGradient对象。

var gradient = context.createRadialGradient(100, 100, 50, 100, 100, 100)
gradient.addColorStop(0, 'white')
gradient.addColorStop(1, 'green')
context.fillStyle = gradient
context.fillRect(0, 0, 200, 200)

上面代码中，生成辐射样式以后，用这个样式填充一个矩形。

3.图像填充

createPattern()方法定义一个图像填充样式，在指定方向上不断重复该图像，填充指定的区域。

context.createPattern(image, repetition)

该方法接受两个参数，第一个参数是图像数据，它可以是<img>元素，也可以是另一个<canvas>元素，或者一个表示图像的 Blob 对象。第二个参数是一个字符串，有四个可能的值，分别是repeat（双向重复）、repeat-x(水平重复)、repeat-y(垂直重复)、no-repeat(不重复)。如果第二个参数是空字符串或null，则等同于null。

该方法的返回值是一个CanvasPattern对象。

var img = new Image()
img.src = 'https://example.com/pattern.png'
img.onload = function () {
  var pattern = context.createPattern(img, 'repeat')
  context.fillStyle = pattern
  context.fillRect(0, 0, 400, 400)
}

上面代码中，图像加载成功以后，使用createPattern()生成图像样式，然后使用这个样式填充指定区域。

4.阴影

以下属性用于设置阴影。

CanvasRenderingContext2D.shadowBlur：阴影的模糊程度，默认为0。
CanvasRenderingContext2D.shadowColor：阴影的颜色，默认为black。
CanvasRenderingContext2D.shadowOffsetX：阴影的水平位移，默认为0。
CanvasRenderingContext2D.shadowOffsetY：阴影的垂直位移，默认为0。

下面是一个例子。

context.shadowOffsetX = 10
context.shadowOffsetY = 10
context.shadowBlur = 5
context.shadowColor = 'rgba(0,0,0,0.5)'

context.fillStyle = 'green'
context.fillRect(10, 10, 100, 100)

Canvas 样式控制 ​

1.线性 ​

2.渐变色 ​

3.图像填充 ​

4.阴影 ​

Canvas 样式控制

1.线性

2.渐变色

3.图像填充

4.阴影