html5 캔버스는 방사성 그라데이션 색상 효과를 그립니다.

캔버스에는 여전히 몇 가지 함정이 있습니다. 예를 들어 fillRect는 속성이 아니라 메서드입니다. fillRect=를 쓰면 아무런 효과가 없으며 오류가 보고되지 않습니다.

여기서는 createRadialGradient API가 사용됩니다. 이 API는 6개의 매개변수를 수신하며 처음 3개는 위쪽 원을 나타냅니다. 반환된 인스턴스는 addColorStop과 함께 사용할 수 있습니다.

can2_context는 getContext의 캔버스 그리기 컨텍스트입니다.

 function Radia(bottom_x,bottom_y,bottom_r,top_x,top_y,top_r){ this.bottom_x=bottom_x; this.bottom_r=bottom_r; this.top_x=top_x; top_r; this.gradient=can2_context.createRadialGradient(this.bottom_x,this.bottom_y,this.bottom_r,this.top_x,this.top_y,this.top_r)}Radia.prototype.addColor=function(){ for(var i=0; i<arguments.length;i++){ this.gradient.addColorStop(arguments[i].num,arguments[i].color) }}Radia.prototype.draw=function(x1,y1,x2,y2){ can2_context.fillStyle=this.gradient; (x1,y1,x2,y2)}var some1=new Radia(canvas_2.width/2, canvas_2.height-100, 0, canvas_2.width/2, 0, 300)some1.addColor({num:0.2,color:blue},{num:1,color:yellow},{num:0.7,color:white })some1.draw(0, 0, canvas_2.width, canvas_2.height)

위 내용은 에디터가 소개한 html5 캔버스 그리기 방사성 그라데이션 효과입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!