THREEJS use transparent materials but the distance is blurred

Questions
1

effect like this
enter image description here

I have used ‘depthTest’‘depthWrite’,The result is the same as the picture above.
When I used the ‘alphaTest’, the center of the circle will appear black,as shown in the picture below

enter image description here

the code

function initMap(color){
    var canvas = document.createElement( 'canvas' );
    canvas.width = 128;
    canvas.height = 128;
    canvas.style.background = 'transparent';

    var context = canvas.getContext( '2d' );
    var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
    gradient.addColorStop( 0, 'rgba(255,255,255,0)' );
    gradient.addColorStop( 1, color );
    // context.globalAlpha=0.2;
    // context.shadowBlur = 20;
    // context.shadowColor = gradient;
    
    context.fillStyle = gradient;
    context.fillRect( 0, 0, canvas.width, canvas.height );

    var shadowTexture = new THREE.CanvasTexture( canvas );
    shadowTexture.minFilter = THREE.LinearFilter;
    stickers[color] = shadowTexture;
    return shadowTexture
}

let material = new THREE.MeshBasicMaterial( { 
        map: stickers[color]||initMap(color),
        // depthTest: false,
        depthWrite: false,
        // alphaTest: 0.1,
        transparent: true,
        side: THREE.DoubleSide,
        opacity: p<0?0.1:p
    } );
let mesh = new THREE.Mesh(new THREE.CircleBufferGeometry(4, 320),material)
scene.add(mesh)
2

/cc