Cesium polygon gradient texture (canvas)

You can use it directly ：Cesium.ImageMaterialProperty(options) Methods Material assignment .

//  draw canvas The gradient （ It's used here   Radial / round   The gradient ）
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
    
  let ctx = canvas.getContext("2d");
  var grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) //  Create a gradient radial / Circular object 
  grad.addColorStop(0, "rgba(240,250,40,1)"); //  Set gradient color 
  grad.addColorStop(0.25, "rgba(327,201,64,1)");
  grad.addColorStop(0.5, "rgba(22,184,200,1)");
  grad.addColorStop(1, "rgba(82,67,192,1)");
  ctx.fillStyle = grad; //  Set up fillStyle For the current gradient object 
  ctx.fillRect(0, 0, 500, 500); //  Draw gradient graphics 
}

//  Draw polygon 
viewer.entities.add({
    
  polygon: {
    
    //  Get the specified properties （positions,holes（ Areas in the drawing that need to be hollowed out ））
    hierarchy: {
    
      positions: Cesium.Cartesian3.fromDegreesArray([
        120.9677706, 30.7985748,
        110.20, 34.55,
        120.20, 50.55
      ]),
    },
    extrudedHeight: 0.0,
    //  It can be used directly here canvas Elements 
    material: new Cesium.ImageMaterialProperty({
    
      image: document.getElementById('myCanvas'),
      transparent: true
    }),
    closeTop: false,
    closeBottom: false
  }
});

//  After use, you can delete the previously drawn canvas
document.getElementById('myCanvas').remove();

canvas Fill gradient , Please see my other article ： Click to see