html5 canvas繪製放射性漸層色效果程式碼實例

本文主要介紹了html5 canvas繪製放射性漸層色效果,需要的朋友可以參考下，希望能幫助大家。

效果圖展示：

 

canvas有些地方還是有點坑的，例如fillRect是方法不是屬性，如果寫成fillRect=這樣是沒效果的，而且還不報錯....

這裡用到了createRadialGradient這個API 這個API接收6個參數，前三個表示底下的圓，後三個表示上面的圓，回傳的實例還是可以用addColorStop

can2_context是getContext的canvas繪圖上下文環境

function Radia(bottom_x,bottom_y,bottom_r,top_x,top_y,top_r){
  this.bottom_x=bottom_x;
  this.bottom_y=bottom_y;
  this.bottom_r=bottom_r;
  this.top_x=top_x;
  this.top_y=top_y;
  this.top_r=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)

相關推薦：

CSS3中的顏色值RGBA以及漸變色的具體詳解（圖）

css漸層色彩省略標記嵌入字體文字陰影的詳細介紹

div+css背景漸層色程式碼範例

以上是html5 canvas繪製放射性漸層色效果程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！