使用Konva操纵HTML5画布：第4部分，样式

在本系列的第二篇教程中，您学习了如何使用Konva绘制一些基本形状，例如矩形，圆形和正多边形。 第三个教程介绍了如何使用Konva在画布上绘制一些更复杂的形状，例如星形和环形以及精灵。

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

应用填充和描边

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

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

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

径向渐变也具有相同的属性集，但是单词Linear替换为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 。 这就是第三个矩形中的径向渐变源自左上角的原因。 还要记住，起点和终点是相对于形状本身指定的。

与填充一样，可以在首次实例化形状时使用stroke和strokeWidth属性为笔触颜色和笔触宽度设置值。 您还可以使用stroke()和strokewidth()方法动态设置这两个值。

在Konva中创建阴影

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

您可以使用opacity属性控制形状本身的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.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混合模式时，最终的颜色在所有重叠的位置都变为透明。

最后的想法

在本教程中，我们学习了如何用线性或径向渐变而不是纯色填充形状。 我们还学习了如何将阴影应用于不同的形状，并使用opacity属性使它们部分透明。 最后一节向您展示了如何使用混合模式，以便在两个形状重叠后更改最终颜色。

如果您对本教程有任何疑问，请在评论中让我知道。 该系列的下一个也是最后一个教程将教您如何在Konva中将事件绑定到不同的形状。

翻译自: https://code.tutsplus.com/tutorials/manipulating-html5-canvas-using-konva-part-4-styling--cms-29873