使用Konva操作HTML5 Canvas：第4部分

在本教程中，我们将更进一步，学习如何通过更改填充和描边值来将不同的样式应用于形状。您还将学习如何控制形状的不透明度并对其应用阴影。在最后的部分中，您将学习如何使用混合模式来指定不同形状重叠时的最终结果。

应用填充和描边

我们一直在使用本系列第一个教程中的fill和stroke属性。然而，到目前为止，我们只用它们来填充纯色的形状。您还可以使用渐变（线性和径向）以及图像填充形状。应用于形状的不同笔划也是如此。

有两种方法可以将填充应用到不同的形状。您可以fill在 Konva 中首次创建形状时使用该属性设置填充值，也可以使用该fill()方法动态应用填充以响应某些事件，例如悬停、按钮单击等。

当用纯色填充元素时，您可以为fill属性指定一个值，它会正常工作。fillLinearGradientStartPoint当使用线性渐变填充形状内部时，您需要为许多其他属性（如、 fillLinearGradientEndPoint和）指定有效值 fillLinearGradientColorStops。前两个属性接受指定渐变起点和终点的 x 和 y 坐标的对象。您还可以使用、、和属性分别指定 x fillLinearGradientStartPointX和 fillLinearGradientStartPointYy fillLinearGradientEndPointX值 fillLinearGradientEndPointY。

径向渐变也具有相同的一组属性，但单词Linear将d替换Radial为。与径向梯度相关的另外两个属性是fillRadialGradientStartRadius和fillRadialGradientEndRadius。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 25,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 0
  },
  fillLinearGradientEndPoint: {
    x: 200,
    y: 150
  },
  fillLinearGradientColorStops: [0, 'blue', 1, 'yellow'],
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 375,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 50
  },
  fillLinearGradientEndPoint: {
    x: 100,
    y: -50
  },
  fillLinearGradientColorStops: [0, 'green', 0.1, 'yellow', 0.5, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 25,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 220,
  fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 375,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 150,
  fillRadialGradientStartPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientEndPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientColorStops: [0, 'blue', 0.5, 'yellow', 0.9, 'green'],
  stroke: "black"
});

layerA.add(rectA, rectB, rectC, rectD);

stage.add(layerA);

如果未指定，则假定径向渐变的起点和终点为0,0。这就是为什么第三个矩形中的径向渐变源自左上角的原因。还要记住，起点和终点是相对于形状本身指定的。

使用Konva操作HTML5 Canvas：第4部分第1张

就像填充一样，您可以在第一次实例化形状时使用stroke和属性设置描边颜色和描边宽度的值。您还可以使用和方法strokeWidth动态设置这两个值。stroke()strokewidth()

在 Konva 中创建阴影

您可以借助称为shadowColor、shadowOffset、shadowBlur和的四个不同属性将阴影应用于使用 Konva 创建的任何形状shadowOpacity。该shadowOffset属性接受具有x和y组件的对象作为其值，但您也可以使用shadowOffsetXandshadowOffsetY分别指定x和y坐标。您还可以选择使用该shadowEnabled属性启用和禁用任何特定形状的阴影。

您可以使用该opacity属性控制形状本身的不透明度。请注意，完全透明的对象不会投射任何阴影。同样，如果您将fill形状的颜色设置为透明，则只有其阴影stroke将呈现在画布上。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 25,
  y: 25,
  width: 200,
  height: 150,
  cornerRadius: 5,
  fill: "orange",
  opacity: 0.5,
  shadowColor: "black",
  shadowOffset: {
    x: -10,
    y: 10
  },
  shadowBlur: 10,
  stroke: "black"
});

var starA = new Konva.Star({
  x: 400,
  y: 200,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 150,
  fill: "transparent",
  stroke: "black",
  strokeWidth: 5,
  shadowColor: "red",
  shadowOffset: {
    x: 5,
    y: 5
  },
  shadowBlur: 0
});

layerA.add(rectA, starA);

stage.add(layerA);

将该shadowBlur属性设置为 0 会使阴影与原始形状本身一样清晰。将此值设置得太高会使阴影失去原来的形状；你只会在画布上看到一个黑色的补丁。

使用Konva操作HTML5 Canvas：第4部分第2张

我想指出，一旦实例化了一个Konva.Text()对象，您还可以使用相同的属性集创建文本阴影。

应用混合模式

到目前为止，在该系列中，形状之间的任何重叠都完全隐藏了底部形状。保持底部形状可见的唯一方法是使其上方的所有形状部分透明。

有时，您可能希望不同形状重叠后的最终结果遵循一定的规则。例如，可以仅在形状重叠的情况下显示较浅或较深的颜色。

Konva 允许您指定一些值来确定重叠形状的颜色应如何使用该globalCompositeOperation属性混合在一起。您可以阅读MDN 上的文档以更详细地了解该属性及其所有可能的值。

在下面的示例中，我对放置在中心矩形角的每个矩形应用了不同的混合模式。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectCenter = new Konva.Rect({
  x: 225,
  y: 125,
  width: 150,
  height: 150,
  fill: "rgb(255, 100, 0)"
});

var rectA = new Konva.Rect({
  x: 125,
  y: 25,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "lighten"
});

var rectB = new Konva.Rect({
  x: 325,
  y: 25,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "darken"
});

var rectC = new Konva.Rect({
  x: 125,
  y: 225,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "hue"
});

var rectD = new Konva.Rect({
  x: 325,
  y: 225,
  width: 150,
  height: 150,
  fill: "rgb(0, 255, 0)",
  globalCompositeOperation: "xor"
});

layerA.add(rectCenter, rectA, rectB, rectC, rectD);

stage.add(layerA);

左上角矩形rgb(0, 200, 100)的颜色是，中间矩形的颜色是rgb(255, 100, 0)。lighten应用混合模式时，两种颜色的成分rgb会单独比较，每个成分的较高值用于获得最终颜色。在我们的例子中，左上角的最终颜色变为rgb(255, 200, 100)。

darken应用混合模式时，两种颜色的成分rgb会单独比较，每个成分的较低值用于获得最终颜色。在我们的例子中，右上角的最终颜色变为rgb(0, 100, 0)。

应用混合模式时hue，底部颜色的亮度和色度与顶部颜色的色调相结合。这就是为什么最终颜色仍然保持绿色但变浅的原因。当xor应用混合模式时，最终的颜色在所有重叠的地方都变得透明。

使用Konva操作HTML5 Canvas：第4部分第3张