LinearGradientBrush.applyToNode

Syntax

applyToNode(node: HTMLElement);

Parameters

node. DOM element, to which a brush is applied.

Description

The applyToNode method applies the brush with linear gradient fill to the specified DOM element.

Example

To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. Create the div element, apply linear gradient fill to it. Output parameters of gradient transition point in the CSS format to the browser console:

// Create a div element
var divElem = PP.createElement(document.body);
// Set up styles for this element
divElem.style.cssText = "width: 100px; height: 100px; border: 1px solid rgb(102,102, 102);";
// Create linear gradient fill
var gradientSettings = {
    GradientType: 0
}
var gradientBrush = new PP.LinearGradientBrush(gradientSettings);
// Set gradient transition points
var stop1 = new PP.GradientStop({
    Color: "#e6e6fa",
    Offset: 0.5
});
var stop2 = new PP.GradientStop({
    Color: "#abdaff"
});
gradientBrush.setGradientStops([stop1, stop2]);
// Set start and end relative gradient points
var startPoint = new PP.Point({
    X: 0,
    Y: 0
});
var endPoint = new PP.Point({
    X: 0,
    Y: 0
});
gradientBrush.setStartPoint(startPoint);
gradientBrush.setEndPoint(endPoint);
// Apply the brush
gradientBrush.applyToNode(divElem);
// Output parameters of gradient transition point in the CSS format
console.log("Parameters of gradient transition point in the CSS format: " + stop1.toCSSFormat());

As a result a brush with linear gradient fill is set for the div element:

The browser console also displays parameters of gradient transition point in the CSS format:

Parameters of gradient transition point in the CSS format: rgba(230, 230, 250, 1) 50%