Gradients

渐变

Canvas can fill shapes with color but also with gradients or images.

画布可以用颜色填充形状，也可以用渐变或图像填充形状。

onPaint: {
    var ctx = getContext("2d")

    var gradient = ctx.createLinearGradient(100,0,100,200)
    gradient.addColorStop(0, "blue")
    gradient.addColorStop(0.5, "lightsteelblue")
    ctx.fillStyle = gradient
    ctx.fillRect(50,50,100,100)
}

The gradient in this example is defined along the starting point (100,0) to the end point (100,200), which gives a vertical line in the middle of our canvas. The gradient-stops can be defined as a color from 0.0 (gradient start point) to 1.0 (gradient endpoint). Here we use a blue color at 0.0 (100,0) and a lightsteelblue color at the 0.5 (100,200) position. The gradient is defined as much larger than the rectangle we want to draw, so the rectangle clips gradient to it’s defined the geometry.

这个例子中的渐变被定义为沿着起点（100，0）到终点（100，200），这在我们的画布中间给出了一条垂直线。渐变停止点可以定义为从0.0（渐变起点）到1.0（渐变终点）的颜色。在这里，我们在0.0（100,0）位置使用蓝色blue，在0.5（100，200）位置使用浅蓝色lightsteelblue。渐变被定义为比我们想要绘制的矩形大得多，因此矩形将渐变剪裁到几何体定义的位置。