Es gibt immer noch einige Fallstricke in Canvas. Beispielsweise ist fillRect eine Methode und kein Attribut. Wenn Sie fillRect= schreiben, hat es keine Auswirkung und es wird kein Fehler gemeldet.
Hier wird die createRadialGradient-API verwendet. Die ersten drei stellen den unteren Kreis dar und die letzten drei stellen den oberen Kreis dar. Die zurückgegebene Instanz kann weiterhin mit addColorStop verwendet werden.
can2_context ist der Canvas-Zeichnungskontext von getContext
function Radia(bottom_x,bottom_y,bottom_r,top_x,top_y,top_r){ this.bottom_y=bottom_y; this.top_y=top_y; 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; can2_context.fillRect (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) ZusammenfassenDas Obige ist der vom Herausgeber eingeführte radioaktive Verlaufseffekt für die HTML5-Leinwand. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!