canvas離屏 旋轉效果實踐 旋轉的雪花

2022-08-05 16:27:19 字數 1488 閱讀 8631

效果展示

理論基礎——“常見的canvas優化——模糊問題、旋轉效果”

1、封裝畫線函式

function drawline(ctx,x1,y1,x2,y2,color)
2、畫雪花的六條線

function canvassinglesnow(snowsize)

return singlesnow;

}

首先這裡用到了離屏canvas,我們通過傳參的方式確定離屏canvas的尺寸,是為了儘可能避免canvas圖案縮放導致的顯示效果問題。

另外這裡for迴圈中用到了canvas的旋轉效果,所以我們可以很輕易的畫出6條有角度的線。效果如下圖所示

3、畫出完整的雪花

function drawcanvassnow(centersnow)

return canvassnow;

}

上述**中尺寸部分說明:小雪花的尺寸比大雪花小,用比例可以方便縮放;小雪花的位置則固定在大雪花六條線的端點處。效果如下圖所示

1、封裝一個根據旋轉載入離屏canvas的函式

//r為雪花圖案中心距畫布中心的距離

//angle為雪花圖案在畫布上的安放角度

//size為雪花圖案的顯示尺寸

function drawsnowangle(ctx,r,angle,size)

2、可以將離屏canvas畫的雪花圖案畫到實際顯示的canvas上了

//center為實際顯示canvas的畫布中心(半徑)

//rsnow為雪花圖案的半徑

drawsnowangle(ctx, center - rsnow, i/snownum, rsnow * 2);

3、加上動態旋轉效果

var snownum = 1;

var isadd = true;

var loop = setinterval('drawcanvas()', 10);//定時器,每10ms繪製一次

function drawcanvas()//最大個數為18

else if(snownum <= 1)//最小個數為1

if(isadd)//達到最大後開始遞減

else//達到最少後開始遞增

//畫圖

var rsnow = center/2 * (snownum - 6)/6;//設定雪花圖案顯示尺寸

canvassnow = drawcanvassnow(rsnow);//畫出離屏雪花圖案

ctx.clearrect(-center, -center, center * 2, center * 2);//清除畫布

for(var i = 0; i < snownum; i++)

}