Canvas にはまだ落とし穴がいくつかあります。たとえば、fillRect は属性ではなくメソッドです。fillRect= と書いても効果はなく、エラーも報告されません。
ここでは createRadialGradient API が使用されます。この API は 6 つのパラメーターを受け取ります。最初の 3 つは下の円を表し、最後の 3 つは上の円を表します。
can2_context は getContext のキャンバス描画コンテキストです。
関数 Radia(bottom_x,bottom_y,bottom_r,top_x,top_y,top_r){ this.bottom_x=bottom_y; this.top_y=top_r;トップ_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武道サイトを応援してくださった皆様、誠にありがとうございました!